From bc065bb68ba0193a87d12fe8089ab643c392ca59 Mon Sep 17 00:00:00 2001 From: Hans Date: Wed, 30 Nov 2022 10:12:54 +0700 Subject: [PATCH 1/5] fix blue outline at checkbox --- src/components/Checkbox.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index d4f6adbf2c6c..6b5a8a76e8f6 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -94,6 +94,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" @@ -111,6 +112,7 @@ class Checkbox extends React.Component { 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 && } From 00661afacf4bc6427ba0f81fcfab7ec78da89030 Mon Sep 17 00:00:00 2001 From: Hans Date: Wed, 30 Nov 2022 10:38:23 +0700 Subject: [PATCH 2/5] fix edge case --- src/components/Checkbox.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 6b5a8a76e8f6..426ed8203e88 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -82,6 +82,12 @@ class Checkbox extends React.Component { return; } + if (this.state.isFocused && this.props.isChecked) { + this.setState({ + isFocused: false, + }); + } + this.props.onPress(); } @@ -95,6 +101,7 @@ class Checkbox extends React.Component { onBlur={this.onBlur} ref={this.props.forwardedRef} onPressOut={this.onBlur} + onPressIn={this.onFocus} style={this.props.style} onKeyDown={this.handleSpaceKey} accessibilityRole="checkbox" From 01dd47cb8d3fd57ba161ff2b5963e1a104a95d81 Mon Sep 17 00:00:00 2001 From: Hans Date: Wed, 30 Nov 2022 22:57:23 +0700 Subject: [PATCH 3/5] Remove duplicate line, unused code --- src/components/Checkbox.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 426ed8203e88..e84dee6e8a02 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -82,10 +82,9 @@ class Checkbox extends React.Component { return; } + // Make sure checkbox get unfocused when it's unselected if (this.state.isFocused && this.props.isChecked) { - this.setState({ - isFocused: false, - }); + this.onBlur(); } this.props.onPress(); @@ -101,7 +100,6 @@ class Checkbox extends React.Component { onBlur={this.onBlur} ref={this.props.forwardedRef} onPressOut={this.onBlur} - onPressIn={this.onFocus} style={this.props.style} onKeyDown={this.handleSpaceKey} accessibilityRole="checkbox" @@ -118,7 +116,6 @@ 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, ]} > From da7be3b9bac3079301444eadeef5e8183579c13c Mon Sep 17 00:00:00 2001 From: Hans Date: Fri, 2 Dec 2022 23:40:04 +0700 Subject: [PATCH 4/5] update linting --- src/components/Checkbox.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index e84dee6e8a02..43cfc7233f6c 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -82,8 +82,10 @@ class Checkbox extends React.Component { return; } - // Make sure checkbox get unfocused when it's unselected - if (this.state.isFocused && this.props.isChecked) { + const wasChecked = this.props.isChecked; + + // Make sure the checkbox gets unfocused when it's about to be unselected + if (this.state.isFocused && wasChecked) { this.onBlur(); } From fce96b15e556b933fbcfa7d7d390385e9c27402f Mon Sep 17 00:00:00 2001 From: Hans Date: Wed, 7 Dec 2022 23:21:59 +0700 Subject: [PATCH 5/5] update comment --- src/components/Checkbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 43cfc7233f6c..f5d86757ec47 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -84,7 +84,7 @@ class Checkbox extends React.Component { const wasChecked = this.props.isChecked; - // Make sure the checkbox gets unfocused when it's about to be unselected + // If checkbox is checked and focused, make sure it's unfocused when pressed. if (this.state.isFocused && wasChecked) { this.onBlur(); }