Merge pull request #13181 from hungvu193/fix-11283

Fix green outline at checkbox
Expensify · Dec 7, 2022 · cbe3b1e · cbe3b1e
2 parents 9512731 + fce96b1
commit cbe3b1e
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
@@ -82,6 +82,13 @@ class Checkbox extends React.Component {
             return;
         }
 
+        const wasChecked = this.props.isChecked;
+
+        // If checkbox is checked and focused, make sure it's unfocused when pressed.
+        if (this.state.isFocused && wasChecked) {
+            this.onBlur();
+        }
+
         this.props.onPress();
     }
 
@@ -94,6 +101,7 @@ class Checkbox extends React.Component {
                 onFocus={this.onFocus}
                 onBlur={this.onBlur}
                 ref={this.props.forwardedRef}
+                onPressOut={this.onBlur}
                 style={this.props.style}
                 onKeyDown={this.handleSpaceKey}
                 accessibilityRole="checkbox"
@@ -110,7 +118,7 @@ class Checkbox extends React.Component {
                                 this.props.isChecked && styles.checkedContainer,
                                 this.props.hasError && styles.borderColorDanger,
                                 this.props.disabled && styles.cursorDisabled,
-                                this.state.isFocused && styles.borderColorFocus,
+                                (this.state.isFocused || this.props.isChecked) && styles.borderColorFocus,
                             ]}
                         >
                             {this.props.isChecked && <Icon src={Expensicons.Checkmark} fill={themeColors.textLight} height={14} width={14} />}