Skip to content

Commit 26a1b18

Browse files
author
Alberto Iannaccone
committed
fix onBlur with empty strings
1 parent f41532c commit 26a1b18

File tree

2 files changed

+16
-9
lines changed

2 files changed

+16
-9
lines changed

arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,16 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
6969
};
7070

7171
/* Prevent the user from entering invalid values */
72-
const onBlur = (): void => {
73-
if ((currentValue === 0 && minValue > 0) || isNaN(currentValue)) {
72+
const onBlur = (event: React.FocusEvent): void => {
73+
if (event.currentTarget.contains(event.relatedTarget as Node)) {
74+
return;
75+
}
76+
77+
if (
78+
(currentValue === 0 && minValue > 0) ||
79+
isNaN(currentValue) ||
80+
isEmptyString
81+
) {
7482
setValueState({
7583
currentValue: initialValue,
7684
isEmptyString: false,
@@ -95,12 +103,11 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (
95103
const downDisabled = isDisabledException || currentValue <= minValue;
96104

97105
return (
98-
<div className="settings-step-input-container">
106+
<div className="settings-step-input-container" onBlur={onBlur}>
99107
<input
100108
className={classnames('settings-step-input-element', classNames?.input)}
101109
value={isEmptyString ? '' : String(currentValue)}
102110
onChange={onUserInput}
103-
onBlur={onBlur}
104111
type="number"
105112
pattern="[0-9]+"
106113
/>

arduino-ide-extension/src/browser/style/settings-step-input.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
position: relative
33
}
44

5-
.settings-step-input-element::-webkit-inner-spin-button,
5+
.settings-step-input-element::-webkit-inner-spin-button,
66
.settings-step-input-element::-webkit-outer-spin-button {
7-
-webkit-appearance: none;
8-
margin: 0;
7+
-webkit-appearance: none;
8+
margin: 0;
99
}
1010

1111
.settings-step-input-buttons-container {
@@ -25,7 +25,7 @@
2525
right: 14px;
2626
}
2727

28-
.settings-step-input-container:hover > .settings-step-input-buttons-container {
28+
.settings-step-input-container:hover>.settings-step-input-buttons-container {
2929
display: flex;
3030
}
3131

@@ -47,4 +47,4 @@
4747

4848
.settings-step-input-button:hover {
4949
background: rgba(128, 128, 128, 0.8);
50-
}
50+
}

0 commit comments

Comments
 (0)