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, ScrollView,
Platform, Platform,
StatusBar, StatusBar,
Keyboard,
useWindowDimensions, useWindowDimensions,
type LayoutChangeEvent, type LayoutChangeEvent,
type PressableStateCallbackType, type PressableStateCallbackType,
@@ -60,6 +59,7 @@ import {
type SheetHeader, type SheetHeader,
} from "@/components/adaptive-modal-sheet"; } from "@/components/adaptive-modal-sheet";
import { FloatingSurface } from "@/components/ui/floating"; import { FloatingSurface } from "@/components/ui/floating";
import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
const IS_WEB = isWeb; const IS_WEB = isWeb;
@@ -738,9 +738,6 @@ function applySetOpen(
onOpenChange: ((open: boolean) => void) | undefined, onOpenChange: ((open: boolean) => void) | undefined,
nextOpen: boolean, nextOpen: boolean,
) { ) {
if (nextOpen) {
Keyboard.dismiss();
}
if (!isControlled) { if (!isControlled) {
setInternalOpen(nextOpen); setInternalOpen(nextOpen);
} }
@@ -1026,7 +1023,7 @@ function MobileComboboxBody(props: MobileBodyProps): ReactElement {
backgroundComponent={ComboboxSheetBackground} backgroundComponent={ComboboxSheetBackground}
handleIndicatorStyle={props.handleIndicatorStyle} handleIndicatorStyle={props.handleIndicatorStyle}
keyboardBehavior="extend" keyboardBehavior="extend"
keyboardBlurBehavior="restore" keyboardBlurBehavior="none"
> >
{props.header ? ( {props.header ? (
<SheetHeaderView header={props.header} onClose={props.onClose} /> <SheetHeaderView header={props.header} onClose={props.onClose} />
@@ -1486,6 +1483,7 @@ export function Combobox({
); );
useWebKeyboardListener(isOpen, handleDesktopKey); useWebKeyboardListener(isOpen, handleDesktopKey);
useDismissKeyboardOnOpen(isOpen, isMobile);
const handleIndicatorStyle = useMemo( const handleIndicatorStyle = useMemo(
() => ({ backgroundColor: theme.colors.palette.zinc[600] }), () => ({ backgroundColor: theme.colors.palette.zinc[600] }),
@@ -18,7 +18,6 @@ import {
Text, Text,
View, View,
Dimensions, Dimensions,
Keyboard,
Platform, Platform,
StatusBar, StatusBar,
type PressableProps, type PressableProps,
@@ -33,6 +32,7 @@ import { FloatingScrollView, FloatingSurface } from "@/components/ui/floating";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style"; import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
import { isWeb } from "@/constants/platform"; import { isWeb } from "@/constants/platform";
import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
// Action status for menu items with loading/success feedback // Action status for menu items with loading/success feedback
export type ActionStatus = "idle" | "pending" | "success"; export type ActionStatus = "idle" | "pending" | "success";
@@ -91,9 +91,6 @@ function useControllableOpenState({
const value = isControlled ? open : internalOpen; const value = isControlled ? open : internalOpen;
const setValue = useCallback( const setValue = useCallback(
(next: boolean) => { (next: boolean) => {
if (next) {
Keyboard.dismiss();
}
if (!isControlled) setInternalOpen(next); if (!isControlled) setInternalOpen(next);
onOpenChange?.(next); onOpenChange?.(next);
}, },
@@ -248,6 +245,7 @@ export function DropdownMenu({
defaultOpen, defaultOpen,
onOpenChange, onOpenChange,
}); });
useDismissKeyboardOnOpen(isOpen);
const flushPendingSelect = useCallback(() => { const flushPendingSelect = useCallback(() => {
const pendingSelect = pendingSelectRef.current; 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]);
}