twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-24 06:48:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix click outside on select field (#4323)

Browse Source 
* Fix click outside on select field

* Fix
This commit is contained in:
Charles Bochet 2024-03-05 18:43:52 +01:00 committed by GitHub
parent 0d231902f0
commit 614f3ed69e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
View File

@ -126,7 +126,7 @@ export const FieldInput = ({
) : isFieldRating(fieldDefinition) ? ( ) : isFieldRating(fieldDefinition) ? (
<RatingFieldInput onSubmit={onSubmit} /> <RatingFieldInput onSubmit={onSubmit} />
) : isFieldSelect(fieldDefinition) ? ( ) : isFieldSelect(fieldDefinition) ? (
<SelectFieldInput onSubmit={onSubmit} /> <SelectFieldInput onSubmit={onSubmit} onCancel={onCancel} />
) : ( ) : (
<></> <></>
)} )}

28
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react'; import { useRef, useState } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useSelectField } from '@/object-record/record-field/meta-types/hooks/useSelectField'; import { useSelectField } from '@/object-record/record-field/meta-types/hooks/useSelectField';
@ -8,6 +8,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { MenuItemSelectTag } from '@/ui/navigation/menu-item/components/MenuItemSelectTag'; import { MenuItemSelectTag } from '@/ui/navigation/menu-item/components/MenuItemSelectTag';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
const StyledRelationPickerContainer = styled.div` const StyledRelationPickerContainer = styled.div`
left: -1px; left: -1px;
@ -17,11 +18,16 @@ const StyledRelationPickerContainer = styled.div`
export type SelectFieldInputProps = { export type SelectFieldInputProps = {
onSubmit?: FieldInputEvent; onSubmit?: FieldInputEvent;
onCancel?: () => void;
}; };
export const SelectFieldInput = ({ onSubmit }: SelectFieldInputProps) => { export const SelectFieldInput = ({
onSubmit,
onCancel,
}: SelectFieldInputProps) => {
const { persistField, fieldDefinition, fieldValue } = useSelectField(); const { persistField, fieldDefinition, fieldValue } = useSelectField();
const [searchFilter, setSearchFilter] = useState(''); const [searchFilter, setSearchFilter] = useState('');
const containerRef = useRef<HTMLDivElement>(null);
const selectedOption = fieldDefinition.metadata.options.find( const selectedOption = fieldDefinition.metadata.options.find(
(option) => option.value === fieldValue, (option) => option.value === fieldValue,
@ -34,8 +40,23 @@ export const SelectFieldInput = ({ onSubmit }: SelectFieldInputProps) => {
? [selectedOption, ...optionsToSelect] ? [selectedOption, ...optionsToSelect]
: optionsToSelect; : optionsToSelect;
useListenClickOutside({
refs: [containerRef],
callback: (event) => {
event.stopImmediatePropagation();
const weAreNotInAnHTMLInput = !(
event.target instanceof HTMLInputElement &&
event.target.tagName === 'INPUT'
);
if (weAreNotInAnHTMLInput && onCancel) {
onCancel();
}
},
});
return ( return (
<StyledRelationPickerContainer> <StyledRelationPickerContainer ref={containerRef}>
<DropdownMenu data-select-disable> <DropdownMenu data-select-disable>
<DropdownMenuSearchInput <DropdownMenuSearchInput
value={searchFilter} value={searchFilter}
@ -47,6 +68,7 @@ export const SelectFieldInput = ({ onSubmit }: SelectFieldInputProps) => {
{optionsInDropDown.map((option) => { {optionsInDropDown.map((option) => {
return ( return (
<MenuItemSelectTag <MenuItemSelectTag
key={option.value}
selected={option.value === fieldValue} selected={option.value === fieldValue}
text={option.label} text={option.label}
color={option.color} color={option.color}