diff --git a/dashboard/src/components/forms/attributes/AgeInput.tsx b/dashboard/src/components/forms/attributes/AgeInput.tsx index fb6a602..c80d03d 100644 --- a/dashboard/src/components/forms/attributes/AgeInput.tsx +++ b/dashboard/src/components/forms/attributes/AgeInput.tsx @@ -9,7 +9,13 @@ import { householdAtom } from '../../../state'; import { useRecoilState } from 'recoil'; import { toHalf } from '../../../utils/toHalf'; -import { isMobile } from 'react-device-detect'; +import { + isChrome, + isChromium, + isEdge, + isMobile, + isWindows, +} from 'react-device-detect'; export const AgeInput = ({ personName, @@ -45,6 +51,16 @@ export const AgeInput = ({ let value: string = toHalf(event.currentTarget.value) ?? ''; value = value.replace(/[^0-9]/g, ''); + // NOTE: WindowsのChromium系ブラウザでは全角入力時に2回入力が発生してしまうため、片方を抑制 + if (isWindows && (isChrome || isEdge || isChromium)) { + if (event.nativeEvent.isComposing) { + // 前回と同じ値を設定して終了 + // (設定しないままreturnすると未変換の全角入力が残ってしまいエンターキーを押すまで反映できなくなってしまう) + changeAge(Number(age)); + return; + } + } + // If empty string, set as is if (value === '') { setAge(''); diff --git a/dashboard/src/components/forms/attributes/Deposit.tsx b/dashboard/src/components/forms/attributes/Deposit.tsx index 05e2d55..ac43cad 100644 --- a/dashboard/src/components/forms/attributes/Deposit.tsx +++ b/dashboard/src/components/forms/attributes/Deposit.tsx @@ -6,7 +6,13 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import { currentDateAtom, householdAtom } from '../../../state'; import { toHalf } from '../../../utils/toHalf'; -import { isMobile } from 'react-device-detect'; +import { + isChrome, + isChromium, + isEdge, + isMobile, + isWindows, +} from 'react-device-detect'; export const Deposit = ({ personName }: { personName: string }) => { const navigationType = useNavigationType(); @@ -17,6 +23,16 @@ export const Deposit = ({ personName }: { personName: string }) => { const [shownDeposit, setShownDeposit] = useState(''); const onChange = useCallback((event: React.ChangeEvent) => { + // NOTE: WindowsのChromium系ブラウザでは全角入力時に2回入力が発生してしまうため、片方を抑制 + if (isWindows && (isChrome || isEdge || isChromium)) { + if (event.nativeEvent.isComposing) { + // 前回と同じ値を設定して終了 + // (設定しないままreturnすると未変換の全角入力が残ってしまいエンターキーを押すまで反映できなくなってしまう) + setHousehold(household); + return; + } + } + const newHousehold = { ...household, }; diff --git a/dashboard/src/components/forms/attributes/Income.tsx b/dashboard/src/components/forms/attributes/Income.tsx index 17229ed..e3f1678 100644 --- a/dashboard/src/components/forms/attributes/Income.tsx +++ b/dashboard/src/components/forms/attributes/Income.tsx @@ -7,7 +7,13 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import { currentDateAtom, householdAtom } from '../../../state'; import { toHalf } from '../../../utils/toHalf'; -import { isMobile } from 'react-device-detect'; +import { + isChrome, + isChromium, + isEdge, + isMobile, + isWindows, +} from 'react-device-detect'; export const Income = ({ personName, @@ -24,6 +30,16 @@ export const Income = ({ const [shownIncome, setShownIncome] = useState(''); const onChange = useCallback((event: React.ChangeEvent) => { + // NOTE: WindowsのChromium系ブラウザでは全角入力時に2回入力が発生してしまうため、片方を抑制 + if (isWindows && (isChrome || isEdge || isChromium)) { + if (event.nativeEvent.isComposing) { + // 前回と同じ値を設定して終了 + // (設定しないままreturnすると未変換の全角入力が残ってしまいエンターキーを押すまで反映できなくなってしまう) + setHousehold(household); + return; + } + } + const newHousehold = { ...household, };