fix: (regression 0.42.3) admin/login: after typing one char you were moved to the other field
Massimo Melina committed
Aug 24, 2023 at 15:22 UTC
f52e4525046a163ec8ecfc3945b46fd542e1ef07
2 files changed
+8
-22
mui-grid-form/StringField.ts
+8
-19
@@ -6,7 +6,7 @@ import { Autocomplete, InputAdornment, TextField } from '@mui/material'
6
import { StandardTextFieldProps } from '@mui/material/TextField/TextField'
7
8
interface StringFieldProps extends FieldProps<string>, Partial<Omit<StandardTextFieldProps, 'label' | 'onChange' | 'value'>> {
9
- typing?: boolean
9
+ typing?: boolean // change state as the user is typing
10
onTyping?: (v: string) => boolean
11
min?: number
12
max?: number
@@ -26,12 +26,13 @@ export function StringField({ value, onChange, min, max, required, setApi, typin
26
})
27
const [state, setState] = useState(normalized)
28
29
- useProxyRef(props, 'inputRef', useCallback((x: any) => x && go(null, x.value), [])) // support autofill on chrome mobile
29
const lastChange = useRef(normalized)
30
useEffect(() => {
31
setState(normalized)
32
lastChange.current = normalized
33
}, [normalized])
34
+ const valueFocusing = useRef('')
35
+ const autoFillDetected = useRef(false)
36
const render = (params: any) => h(TextField, {
37
fullWidth: true,
38
InputLabelProps: state || props.placeholder ? { shrink: true } : undefined,
@@ -42,18 +43,20 @@ export function StringField({ value, onChange, min, max, required, setApi, typin
43
const val = ev.target.value
44
if (onTyping?.(val) === false) return
45
setState(val)
45
- if (typing // change state as the user is typing
46
- || document.activeElement !== ev.target) // autofill ongoing, don't wait onBlur event, just go
46
+ if (typing || autoFillDetected.current)
47
go(ev, val)
48
},
49
onKeyDown(ev) {
50
props.onKeyDown?.(ev)
51
+ autoFillDetected.current = ev.code === undefined
52
if (ev.key === 'Enter')
53
go(ev)
54
},
55
+ onFocus(ev) { valueFocusing.current = ev.target.value },
56
onBlur(ev) {
57
props.onBlur?.(ev)
56
- go(ev)
58
+ if (valueFocusing.current !== ev.target.value)
59
+ go(ev)
60
},
61
InputProps: {
62
startAdornment: start && h(InputAdornment, { position: 'start' }, start),
@@ -79,17 +82,3 @@ export function StringField({ value, onChange, min, max, required, setApi, typin
82
}
83
}
84
82
-// intercept a ref prop. Return another Ref, but you can use the callback instead
83
-function useProxyRef(props: any, propName: string, cb?: (instance: any) => void) {
84
- const ret = useRef()
85
- const was = props[propName]
86
- props[propName] = (instance: any) => { // callback is called twice, first time with null. This happens because it is controlled.
87
- ret.current = instance
88
- cb?.(instance)
89
- if (typeof was === 'function')
90
- was(instance)
91
- else if (was)
92
- (was as any).current = instance
93
- }
94
- return ret
95
-}
mui-grid-form/index.ts
-3
@@ -142,9 +142,6 @@ export function Form<Values extends Dict>({
142
value: toField(originalValue),
143
error: Boolean(errMsg || error) || undefined,
144
setApi(api) { apis[k] = api },
145
- onBlur() {
146
- pleaseValidate(k)
147
- },
145
onKeyDown(event: any) {
146
if (saveOnEnter && event.key === 'Enter')
147
pleaseSubmit()