Fix command menu input click outside listener blocking other elements (#16934)
click outside listeners for `CommandMenuItemNumberInput` and `CommandMenuItemTextInput` were always active, even when the input wasn't focused. This blocked clicks on other elements like toggles in chart settings. fixed by only enabling click outside listener when input is actually focused
This commit is contained in:
+8
-1
@@ -3,9 +3,11 @@ import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-typ
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
|
||||
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
|
||||
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
|
||||
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
|
||||
import styled from '@emotion/styled';
|
||||
import { useRef, useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { type IconComponent } from 'twenty-ui/display';
|
||||
|
||||
type CommandMenuItemTextInputProps = {
|
||||
@@ -35,6 +37,9 @@ export const CommandMenuItemTextInput = ({
|
||||
const focusId = `${id}-input`;
|
||||
const [draftValue, setDraftValue] = useState(value);
|
||||
|
||||
const currentFocusId = useRecoilValue(currentFocusIdSelector);
|
||||
const isTextInputCurrentlyFocused = currentFocusId === focusId;
|
||||
|
||||
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
|
||||
const { removeFocusItemFromFocusStackById } =
|
||||
useRemoveFocusItemFromFocusStackById();
|
||||
@@ -77,7 +82,9 @@ export const CommandMenuItemTextInput = ({
|
||||
inputValue: draftValue,
|
||||
onEscape: handleEscape,
|
||||
onEnter: handleEnter,
|
||||
onClickOutside: handleClickOutside,
|
||||
onClickOutside: isTextInputCurrentlyFocused
|
||||
? handleClickOutside
|
||||
: undefined,
|
||||
});
|
||||
|
||||
const focusInput = () => {
|
||||
|
||||
Reference in New Issue
Block a user