Commit e32ed9c

author

Alberto Iannaccone

committed

fix onBlur with empty strings

1 parent 25d7047 commit e32ed9cCopy full SHA for e32ed9c

File tree

+16

-9

lines changed

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

+16

-9

lines changed

Lines changed: 11 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -69,8 +69,16 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (`
`69`	`69`	`};`
`70`	`70`
`71`	`71`	`/* 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`	`+ ) {`
`74`	`82`	`setValueState({`
`75`	`83`	`currentValue: initialValue,`
`76`	`84`	`isEmptyString: false,`
`@@ -95,12 +103,11 @@ const SettingsStepInput: React.FC<SettingsStepInputProps> = (`
`95`	`103`	`const downDisabled = isDisabledException \|\| currentValue <= minValue;`
`96`	`104`
`97`	`105`	`return (`
`98`		`- <div className="settings-step-input-container">`
	`106`	`+ <div className="settings-step-input-container"onBlur={onBlur}>`
`99`	`107`	`<input`
`100`	`108`	`className={classnames('settings-step-input-element', classNames?.input)}`
`101`	`109`	`value={isEmptyString ? '' : String(currentValue)}`
`102`	`110`	`onChange={onUserInput}`
`103`		`- onBlur={onBlur}`
`104`	`111`	`type="number"`
`105`	`112`	`pattern="[0-9]+"`
`106`	`113`	`/>`

Lines changed: 5 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,10 +2,10 @@`
`2`	`2`	`position: relative`
`3`	`3`	`}`
`4`	`4`
`5`		`-.settings-step-input-element::-webkit-inner-spin-button,`
	`5`	`+.settings-step-input-element::-webkit-inner-spin-button,`
`6`	`6`	`.settings-step-input-element::-webkit-outer-spin-button {`
`7`		`- -webkit-appearance: none;`
`8`		`- margin: 0;`
	`7`	`+ -webkit-appearance: none;`
	`8`	`+ margin: 0;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.settings-step-input-buttons-container {`
`@@ -25,7 +25,7 @@`
`25`	`25`	`right: 14px;`
`26`	`26`	`}`
`27`	`27`
`28`		`-.settings-step-input-container:hover>.settings-step-input-buttons-container {`
	`28`	`+.settings-step-input-container:hover>.settings-step-input-buttons-container {`
`29`	`29`	`display: flex;`
`30`	`30`	`}`
`31`	`31`
`@@ -47,4 +47,4 @@`
`47`	`47`
`48`	`48`	`.settings-step-input-button:hover {`
`49`	`49`	`background: rgba(128, 128, 128, 0.8);`
`50`		`-}`
	`50`	`+}`

Comments

(0)