Skip to content

feat: numberfield announce pasted value #8604

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.

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

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/ar-AE.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "خفض {fieldLabel}",
"increase": "زيادة {fieldLabel}",
"numberField": "حقل رقمي"
"numberField": "حقل رقمي",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mega nit for more assertive message haha:

Suggested change
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
"couldNotParseValue": "Could not understand value: {value}, please try another number format"

}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/bg-BG.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Намаляване {fieldLabel}",
"increase": "Усилване {fieldLabel}",
"numberField": "Номер на полето"
"numberField": "Номер на полето",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/cs-CZ.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Snížit {fieldLabel}",
"increase": "Zvýšit {fieldLabel}",
"numberField": "Číselné pole"
"numberField": "Číselné pole",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/da-DK.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Reducer {fieldLabel}",
"increase": "Øg {fieldLabel}",
"numberField": "Talfelt"
"numberField": "Talfelt",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/de-DE.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "{fieldLabel} verringern",
"increase": "{fieldLabel} erhöhen",
"numberField": "Nummernfeld"
"numberField": "Nummernfeld",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/el-GR.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Μείωση {fieldLabel}",
"increase": "Αύξηση {fieldLabel}",
"numberField": "Πεδίο αριθμού"
"numberField": "Πεδίο αριθμού",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/en-US.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Decrease {fieldLabel}",
"increase": "Increase {fieldLabel}",
"numberField": "Number field"
"numberField": "Number field",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/es-ES.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Reducir {fieldLabel}",
"increase": "Aumentar {fieldLabel}",
"numberField": "Campo de número"
"numberField": "Campo de número",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/et-EE.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Vähenda {fieldLabel}",
"increase": "Suurenda {fieldLabel}",
"numberField": "Numbri väli"
"numberField": "Numbri väli",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/fi-FI.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Vähennä {fieldLabel}",
"increase": "Lisää {fieldLabel}",
"numberField": "Numerokenttä"
"numberField": "Numerokenttä",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/fr-FR.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Diminuer {fieldLabel}",
"increase": "Augmenter {fieldLabel}",
"numberField": "Champ de nombre"
"numberField": "Champ de nombre",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/he-IL.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "הקטן {fieldLabel}",
"increase": "הגדל {fieldLabel}",
"numberField": "שדה מספר"
"numberField": "שדה מספר",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/hr-HR.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Smanji {fieldLabel}",
"increase": "Povećaj {fieldLabel}",
"numberField": "Polje broja"
"numberField": "Polje broja",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/hu-HU.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "{fieldLabel} csökkentése",
"increase": "{fieldLabel} növelése",
"numberField": "Számmező"
"numberField": "Számmező",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/it-IT.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Riduci {fieldLabel}",
"increase": "Aumenta {fieldLabel}",
"numberField": "Campo numero"
"numberField": "Campo numero",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/ja-JP.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "{fieldLabel}を縮小",
"increase": "{fieldLabel}を拡大",
"numberField": "数値フィールド"
"numberField": "数値フィールド",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/ko-KR.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "{fieldLabel} 감소",
"increase": "{fieldLabel} 증가",
"numberField": "번호 필드"
"numberField": "번호 필드",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/lt-LT.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Sumažinti {fieldLabel}",
"increase": "Padidinti {fieldLabel}",
"numberField": "Numerio laukas"
"numberField": "Numerio laukas",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/lv-LV.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Samazināšana {fieldLabel}",
"increase": "Palielināšana {fieldLabel}",
"numberField": "Skaitļu lauks"
"numberField": "Skaitļu lauks",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/nb-NO.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Reduser {fieldLabel}",
"increase": "Øk {fieldLabel}",
"numberField": "Tallfelt"
"numberField": "Tallfelt",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/nl-NL.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "{fieldLabel} verlagen",
"increase": "{fieldLabel} verhogen",
"numberField": "Getalveld"
"numberField": "Getalveld",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/pl-PL.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Zmniejsz {fieldLabel}",
"increase": "Zwiększ {fieldLabel}",
"numberField": "Pole numeru"
"numberField": "Pole numeru",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/pt-BR.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Diminuir {fieldLabel}",
"increase": "Aumentar {fieldLabel}",
"numberField": "Campo de número"
"numberField": "Campo de número",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/pt-PT.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Diminuir {fieldLabel}",
"increase": "Aumentar {fieldLabel}",
"numberField": "Campo numérico"
"numberField": "Campo numérico",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/ro-RO.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Scădere {fieldLabel}",
"increase": "Creștere {fieldLabel}",
"numberField": "Câmp numeric"
"numberField": "Câmp numeric",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/ru-RU.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Уменьшение {fieldLabel}",
"increase": "Увеличение {fieldLabel}",
"numberField": "Числовое поле"
"numberField": "Числовое поле",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/sk-SK.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Znížiť {fieldLabel}",
"increase": "Zvýšiť {fieldLabel}",
"numberField": "Číselné pole"
"numberField": "Číselné pole",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/sl-SI.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Upadati {fieldLabel}",
"increase": "Povečajte {fieldLabel}",
"numberField": "Številčno polje"
"numberField": "Številčno polje",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/sr-SP.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Smanji {fieldLabel}",
"increase": "Povećaj {fieldLabel}",
"numberField": "Polje broja"
"numberField": "Polje broja",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/sv-SE.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Minska {fieldLabel}",
"increase": "Öka {fieldLabel}",
"numberField": "Nummerfält"
"numberField": "Nummerfält",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/tr-TR.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "{fieldLabel} azalt",
"increase": "{fieldLabel} arttır",
"numberField": "Sayı alanı"
"numberField": "Sayı alanı",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/uk-UA.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "Зменшити {fieldLabel}",
"increase": "Збільшити {fieldLabel}",
"numberField": "Поле номера"
"numberField": "Поле номера",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/zh-CN.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "降低 {fieldLabel}",
"increase": "提高 {fieldLabel}",
"numberField": "数字字段"
"numberField": "数字字段",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/numberfield/intl/zh-TW.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{
"decrease": "縮小 {fieldLabel}",
"increase": "放大 {fieldLabel}",
"numberField": "數字欄位"
"numberField": "數字欄位",
"pastedValue": "Pasted value: {value}",
"couldNotParseValue": "Could not understand value: {value}, try another format perhaps"
}
1 change: 1 addition & 0 deletions packages/@react-aria/numberfield/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"dependencies": {
"@react-aria/i18n": "^3.12.11",
"@react-aria/interactions": "^3.25.4",
"@react-aria/live-announcer": "^3.4.4",
"@react-aria/spinbutton": "^3.6.17",
"@react-aria/textfield": "^3.18.0",
"@react-aria/utils": "^3.30.0",
Expand Down
33 changes: 32 additions & 1 deletion packages/@react-aria/numberfield/src/useNumberField.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,21 @@
* governing permissions and limitations under the License.
*/

import {announce} from '@react-aria/live-announcer';
import {AriaButtonProps} from '@react-types/button';
import {AriaNumberFieldProps} from '@react-types/numberfield';
import {chain, filterDOMProps, isAndroid, isIOS, isIPhone, mergeProps, useFormReset, useId} from '@react-aria/utils';
import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';
import {
type ClipboardEvent,
type ClipboardEventHandler,
InputHTMLAttributes,
LabelHTMLAttributes,
RefObject,
useCallback,
useMemo,
useState
} from 'react';
import {DOMAttributes, GroupDOMAttributes, TextInputDOMProps, ValidationResult} from '@react-types/shared';
// @ts-ignore
import intlMessages from '../intl/*.json';
import {NumberFieldState} from '@react-stately/numberfield';
Expand Down Expand Up @@ -181,6 +184,33 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
}
};

let onPaste: ClipboardEventHandler<HTMLInputElement> = (e: ClipboardEvent<HTMLInputElement>) => {
props.onPaste?.(e);
let inputElement = e.target as HTMLInputElement;
if (
inputElement &&
(
((inputElement.selectionEnd ?? -1) - (inputElement.selectionStart ?? 0)) === inputElement.value.length
)
) {
e.preventDefault();
let pastedText = e.clipboardData?.getData?.('text/plain')?.trim() ?? '';
let isValid = state.validate(pastedText);
if (isValid) {
let value = state.parser.parse(pastedText);
let reformattedValue = numberFormatter.format(value);
if (state.validate(reformattedValue)) {
Comment on lines +200 to +202
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does there exist a case where the pastedText is considered valid but is unable to be parsed? The description of parse seems to suggest that might be the case, but digging to see if that is the case. Just concerned if there are any cases where we make it here but end up not announcing that we couldn't parse the value

state.setInputValue(reformattedValue);
if (reformattedValue !== pastedText) {
announce(stringFormatter.format('pastedValue', {value: reformattedValue}), 'polite');
}
}
} else {
announce(stringFormatter.format('couldNotParseValue', {value: pastedText}), 'polite');
}
}
};

let domProps = filterDOMProps(props);
let onKeyDownEnter = useCallback((e) => {
if (e.nativeEvent.isComposing) {
Expand Down Expand Up @@ -223,6 +253,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
onFocusChange,
onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),
onKeyUp,
onPaste,
description,
errorMessage
}, state, inputRef);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ export interface NumberFieldState extends FormValidationState {
/** Sets the current value to the `maxValue` if any, and fires `onChange`. */
incrementToMax(): void,
/** Sets the current value to the `minValue` if any, and fires `onChange`. */
decrementToMin(): void
decrementToMin(): void,
/** Attempts to parse a value in the current locale. */
parser: NumberParser
}

export interface NumberFieldStateOptions extends NumberFieldProps {
Expand Down Expand Up @@ -281,7 +283,8 @@ export function useNumberFieldState(
setNumberValue,
setInputValue,
inputValue,
commit
commit,
parser: numberParser
};
}

Expand Down
Loading