archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(modal): input carry over with IMEs in modal forms (#2709)

Browse Source 
* fix(modal): prevent IME input carryover in form fields when tabbing

* chore: add changeset

* chore: chain default onKeyDown
This commit is contained in:
Ryo Matsukawa 2024-04-14 21:51:43 +09:00 committed by GitHub
parent 2829d4afae
commit eb11a7731a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/old-cameras-sip.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/modal": patch
---
Prevent IME input carryover in form fields when tabbing

14
packages/components/modal/src/modal-content.tsx
View File

@ -9,8 +9,9 @@ import {CloseIcon} from "@nextui-org/shared-icons";
import {RemoveScroll} from "react-remove-scroll"; import {RemoveScroll} from "react-remove-scroll";
import {domAnimation, LazyMotion, m} from "framer-motion"; import {domAnimation, LazyMotion, m} from "framer-motion";
import {useDialog} from "@react-aria/dialog"; import {useDialog} from "@react-aria/dialog";
import {mergeProps} from "@react-aria/utils"; import {chain, mergeProps} from "@react-aria/utils";
import {HTMLNextUIProps} from "@nextui-org/system"; import {HTMLNextUIProps} from "@nextui-org/system";
import {KeyboardEvent} from "react";
import {useModalContext} from "./modal-context"; import {useModalContext} from "./modal-context";
import {scaleInOut} from "./modal-transition"; import {scaleInOut} from "./modal-transition";
@ -59,8 +60,17 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
</button> </button>
); );
// Handle Tab key during IME composition to prevent input carryover
const onKeyDown = useCallback((e: KeyboardEvent) => {
if (e.key === "Tab" && e.nativeEvent.isComposing) {
e.stopPropagation();
e.preventDefault();
}
}, []);
const contentProps = getDialogProps(mergeProps(dialogProps, otherProps));
const content = ( const content = (
<Component {...getDialogProps(mergeProps(dialogProps, otherProps))}> <Component {...contentProps} onKeyDown={chain(contentProps.onKeyDown, onKeyDown)}>
<DismissButton onDismiss={onClose} /> <DismissButton onDismiss={onClose} />
{!hideCloseButton && closeButtonContent} {!hideCloseButton && closeButtonContent}
{typeof children === "function" ? children(onClose) : children} {typeof children === "function" ? children(onClose) : children}