Windows Chromeで全角入力が重複する不具合を修正

project-inclusive · Jan 13, 2025 · 2ba14b0 · 2ba14b0
1 parent 0e973fc
commit 2ba14b0
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git 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
@@ -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<string | number>('');
 
   const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    // 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
@@ -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<string | number>('');
 
   const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    // NOTE: WindowsのChromium系ブラウザでは全角入力時に2回入力が発生してしまうため、片方を抑制
+    if (isWindows && (isChrome || isEdge || isChromium)) {
+      if (event.nativeEvent.isComposing) {
+        // 前回と同じ値を設定して終了
+        // （設定しないままreturnすると未変換の全角入力が残ってしまいエンターキーを押すまで反映できなくなってしまう）
+        setHousehold(household);
+        return;
+      }
+    }
+
     const newHousehold = {
       ...household,
     };