Keep keyboard dismissed for selector sheets

This commit is contained in:
Mohamed Boudra
2026-06-03 15:53:41 +07:00
parent b4fd965c43
commit 9f67542bd5
3 changed files with 22 additions and 9 deletions
+3 -5
View File
@@ -17,7 +17,6 @@ import {
ScrollView,
Platform,
StatusBar,
Keyboard,
useWindowDimensions,
type LayoutChangeEvent,
type PressableStateCallbackType,
@@ -60,6 +59,7 @@ import {
type SheetHeader,
} from "@/components/adaptive-modal-sheet";
import { FloatingSurface } from "@/components/ui/floating";
import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
const IS_WEB = isWeb;
@@ -738,9 +738,6 @@ function applySetOpen(
onOpenChange: ((open: boolean) => void) | undefined,
nextOpen: boolean,
) {
if (nextOpen) {
Keyboard.dismiss();
}
if (!isControlled) {
setInternalOpen(nextOpen);
}
@@ -1026,7 +1023,7 @@ function MobileComboboxBody(props: MobileBodyProps): ReactElement {
backgroundComponent={ComboboxSheetBackground}
handleIndicatorStyle={props.handleIndicatorStyle}
keyboardBehavior="extend"
keyboardBlurBehavior="restore"
keyboardBlurBehavior="none"
>
{props.header ? (
<SheetHeaderView header={props.header} onClose={props.onClose} />
@@ -1486,6 +1483,7 @@ export function Combobox({
);
useWebKeyboardListener(isOpen, handleDesktopKey);
useDismissKeyboardOnOpen(isOpen, isMobile);
const handleIndicatorStyle = useMemo(
() => ({ backgroundColor: theme.colors.palette.zinc[600] }),
@@ -18,7 +18,6 @@ import {
Text,
View,
Dimensions,
Keyboard,
Platform,
StatusBar,
type PressableProps,
@@ -33,6 +32,7 @@ import { FloatingScrollView, FloatingSurface } from "@/components/ui/floating";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
import { isWeb } from "@/constants/platform";
import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
// Action status for menu items with loading/success feedback
export type ActionStatus = "idle" | "pending" | "success";
@@ -91,9 +91,6 @@ function useControllableOpenState({
const value = isControlled ? open : internalOpen;
const setValue = useCallback(
(next: boolean) => {
if (next) {
Keyboard.dismiss();
}
if (!isControlled) setInternalOpen(next);
onOpenChange?.(next);
},
@@ -248,6 +245,7 @@ export function DropdownMenu({
defaultOpen,
onOpenChange,
});
useDismissKeyboardOnOpen(isOpen);
const flushPendingSelect = useCallback(() => {
const pendingSelect = pendingSelectRef.current;
@@ -0,0 +1,17 @@
import { useEffect } from "react";
import { Keyboard } from "react-native";
export function useDismissKeyboardOnOpen(isOpen: boolean, enabled = true) {
useEffect(() => {
if (!enabled || !isOpen) return;
Keyboard.dismiss();
const frame = requestAnimationFrame(() => Keyboard.dismiss());
const timer = setTimeout(() => Keyboard.dismiss(), 150);
return () => {
cancelAnimationFrame(frame);
clearTimeout(timer);
};
}, [enabled, isOpen]);
}