Skip to content

NumberControl: commit (and constrain) value on blur event #39186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 14 commits into from
Mar 21, 2022
Merged

NumberControl: commit (and constrain) value on blur event #39186

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e3bc714
`InputControl`: always commit value to internal state on `blur`
ciampo Mar 3, 2022
b2f2138
`NumberControl`: constain value also on the `UPDATE` action
ciampo Mar 3, 2022
bb15bd2
CHANGELOG
ciampo Mar 3, 2022
823cf7b
Add unit test
ciampo Mar 3, 2022
a1c6fc7
Remove `UPDATE` action from `InputControl` s state reducer
ciampo Mar 8, 2022
1e5123c
Add unit test to check that `onChange` gets called when the value is …
ciampo Mar 9, 2022
6f5696e
Fix input control blur logic, so that `onChange` is called after clam…
ciampo Mar 9, 2022
5db0df6
Comments
ciampo Mar 9, 2022
f6d2654
Use `event.target.validity.valid` in docs, storybook and unit tests
ciampo Mar 9, 2022
1154566
README
ciampo Mar 10, 2022
046ca57
Add docs and update example about input validity
ciampo Mar 15, 2022
5a6154f
Update `onChange` event type
ciampo Mar 15, 2022
43ff576
Override `event.target`, update types
ciampo Mar 15, 2022
dad09a5
Revert docs and Storybook changes about `target.visibility` potential…
ciampo Mar 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update onChange event type
  • Loading branch information
@ciampo
ciampo committed Mar 17, 2022
commit 5a6154f2bf6058f47b5fe286ec1d9bebc7344c49
2 changes: 1 addition & 1 deletion packages/components/src/input-control/input-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function InputField(
commit( valueProp, _event as SyntheticEvent );
} else if ( ! isDirty ) {
onChange( value, {
event: _event as ChangeEvent< HTMLInputElement >,
event: _event as ChangeEvent< HTMLInputElement > | PointerEvent,
} );
wasDirtyOnBlur.current = false;
}
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/input-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {
ReactNode,
ChangeEvent,
SyntheticEvent,
PointerEvent,
} from 'react';
import type { useDrag } from '@use-gesture/react';

Expand Down Expand Up @@ -33,7 +34,7 @@ interface BaseProps {
}

export type InputChangeCallback<
E = ChangeEvent< HTMLInputElement >,
E = ChangeEvent< HTMLInputElement > | PointerEvent,
P = {}
> = ( nextValue: string | undefined, extra: { event: E } & P ) => void;

Expand Down
13 changes: 7 additions & 6 deletions packages/components/src/unit-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type {
ForwardedRef,
SyntheticEvent,
ChangeEvent,
PointerEvent,
} from 'react';
import { omit } from 'lodash';
import classnames from 'classnames';
Expand Down Expand Up @@ -45,7 +46,7 @@ function UnforwardedUnitControl(
isResetValueOnUnitChange = false,
isUnitSelectTabbable = true,
label,
onChange,
onChange: onChangeProp,
onUnitChange,
size = 'default',
style,
Expand Down Expand Up @@ -89,14 +90,14 @@ function UnforwardedUnitControl(

const handleOnQuantityChange = (
nextQuantityValue: number | string | undefined,
changeProps: { event: ChangeEvent< HTMLInputElement > }
changeProps: { event: ChangeEvent< HTMLInputElement > | PointerEvent }
) => {
if (
nextQuantityValue === '' ||
typeof nextQuantityValue === 'undefined' ||
nextQuantityValue === null
) {
onChange?.( '', changeProps );
onChangeProp?.( '', changeProps );
return;
}

Expand All @@ -111,7 +112,7 @@ function UnforwardedUnitControl(
unit
).join( '' );

onChange?.( onChangeValue, changeProps );
onChangeProp?.( onChangeValue, changeProps );
};

const handleOnUnitChange: UnitControlOnChangeCallback = (
Expand All @@ -126,7 +127,7 @@ function UnforwardedUnitControl(
nextValue = `${ data.default }${ nextUnitValue }`;
}

onChange?.( nextValue, changeProps );
onChangeProp?.( nextValue, changeProps );
onUnitChange?.( nextUnitValue, changeProps );

setUnit( nextUnitValue );
Expand Down Expand Up @@ -155,7 +156,7 @@ function UnforwardedUnitControl(
: undefined;
const changeProps = { event, data };

onChange?.(
onChangeProp?.(
`${ validParsedQuantity ?? '' }${ validParsedUnit }`,
changeProps
);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/unit-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export type WPUnitControlUnit = {
};

export type UnitControlOnChangeCallback = InputChangeCallback<
SyntheticEvent< HTMLSelectElement | HTMLInputElement >,
SyntheticEvent< HTMLSelectElement | HTMLInputElement | Element >,
{ data?: WPUnitControlUnit }
>;

Expand Down