Skip to content

Commit

Permalink
fix(CustomSelect): fix custom select cursor updating (#7508)
Browse files Browse the repository at this point in the history
Сейчас нельзя изменять положение курсора с помощью мыши в searchable CustomSelect-е. Проблема в том, что при обработке mousedown происходит preventDefault всегда когда input  в фокусе. Нужно доработать проверку так, что при наличии фокуса и клике в input не происходил preventDefault

Обработали кейс, чтобы при фокуса в поле просходило выделение всего текста
  • Loading branch information
EldarMuhamethanov authored and actions-user committed Sep 2, 2024
1 parent 21291ce commit dd77217
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions packages/vkui/src/components/CustomSelect/CustomSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);
const selectElRef = useExternRef(getRef);
const optionsWrapperRef = React.useRef<HTMLDivElement>(null);
const selectInputRef = useExternRef(getSelectInputRef);

const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);
const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
Expand Down Expand Up @@ -421,7 +422,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
const onFocus = React.useCallback(() => {
const event = new Event('focusin', { bubbles: true });
selectElRef.current?.dispatchEvent(event);
}, [selectElRef]);
selectInputRef.current?.select();
}, [selectElRef, selectInputRef]);

const onClick = React.useCallback(() => {
if (opened) {
Expand Down Expand Up @@ -668,7 +670,6 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
}
}, [emptyText, options, renderDropdown, renderOption]);

const selectInputRef = useExternRef(getSelectInputRef);
const focusOnInputTimerRef = React.useRef<ReturnType<typeof setTimeout>>();
const focusOnInput = React.useCallback(() => {
clearTimeout(focusOnInputTimerRef.current);
Expand Down Expand Up @@ -770,7 +771,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
// но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
// Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
const isInputFocused = document && document.activeElement === selectInputRef.current;
if (isInputFocused) {
const clickTarget = e.target as HTMLElement;
const inputClicked = selectInputRef.current?.contains(clickTarget);
if (isInputFocused && !inputClicked) {
e.preventDefault();
}
};
Expand Down

0 comments on commit dd77217

Please sign in to comment.