Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix onClick behaviour in editor and preview mode.

Browse source
This commit is contained in:
devanshu052000 2025-03-24 23:03:18 +05:30
parent 1e29ec1660
commit 902c2a9d77
2 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
View file

@ -15,6 +15,7 @@ import Label from '@/_ui/Label';
import cx from 'classnames';
import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from './utils';
import { isMobileDevice } from '@/_helpers/appUtils';
import useStore from '@/AppBuilder/_stores/store';
const { DropdownIndicator, ClearIndicator } = components;
const INDICATOR_CONTAINER_WIDTH = 60;
@ -39,7 +40,7 @@ export const CustomDropdownIndicator = (props) => {
export const CustomClearIndicator = (props) => {
return (
<ClearIndicator {...props}>
<ClearIndicatorIcon width={'18'} fill={'var(--borders-strong)'} className="cursor-pointer" />
<ClearIndicatorIcon width={'18'} fill={'var(--borders-strong)'} className="cursor-pointer clear-indicator" />
</ClearIndicator>
);
};
@ -96,11 +97,14 @@ export const DropdownV2 = ({
const { isValid, validationError } = validationStatus;
const ref = React.useRef(null);
const dropdownRef = React.useRef(null);
const selectRef = React.useRef(null);
const [visibility, setVisibility] = useState(properties.visibility);
const [isDropdownLoading, setIsDropdownLoading] = useState(dropdownLoadingState);
const [isDropdownDisabled, setIsDropdownDisabled] = useState(disabledState);
const [searchInputValue, setSearchInputValue] = useState('');
const [userInteracted, setUserInteracted] = useState(false);
const currentMode = useStore((state) => state.currentMode);
const isEditor = currentMode === 'edit';
const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
const labelRef = useRef();
@ -167,6 +171,12 @@ export const DropdownV2 = ({
setExposedVariable('isValid', validationStatus?.isValid);
};
const handleClickInEditor = (e) => {
if (e.target.className.includes('clear-indicator') || isMenuOpen) return;
e.stopPropagation();
selectRef.current?.onControlMouseDown(e);
};
useEffect(() => {
setInputValue(findDefaultItem(advanced ? schema : options));
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -431,8 +441,13 @@ export const DropdownV2 = ({
_width={_width}
top={'1px'}
/>
<div className="w-100 px-0 h-100 dropdownV2-widget" ref={ref}>
<div
className="w-100 px-0 h-100 dropdownV2-widget"
ref={ref}
onMouseDownCapture={isEditor && handleClickInEditor}
>
<Select
ref={selectRef}
menuIsOpen={isMenuOpen}
isDisabled={isDropdownDisabled}
value={selectOptions.filter((option) => option.value === currentValue)[0] ?? null}

23
frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
View file

@ -12,6 +12,7 @@ import Label from '@/_ui/Label';
const tinycolor = require('tinycolor2');
import { CustomDropdownIndicator, CustomClearIndicator } from '../DropdownV2/DropdownV2';
import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from '../DropdownV2/utils';
import useStore from '@/AppBuilder/_stores/store';
export const MultiselectV2 = ({
id,
@ -62,6 +63,7 @@ export const MultiselectV2 = ({
const isMandatory = validation?.mandatory ?? false;
const multiselectRef = React.useRef(null);
const labelRef = React.useRef(null);
const selectRef = React.useRef(null);
const [validationStatus, setValidationStatus] = useState(
validate(selected?.length ? selected?.map((option) => option.value) : null)
);
@ -74,6 +76,8 @@ export const MultiselectV2 = ({
const [searchInputValue, setSearchInputValue] = useState('');
const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
const [userInteracted, setUserInteracted] = useState(false);
const currentMode = useStore((state) => state.currentMode);
const isEditor = currentMode === 'edit';
const [isMultiselectOpen, setIsMultiselectOpen] = useState(false);
useEffect(() => {
@ -281,6 +285,12 @@ export const MultiselectV2 = ({
}
};
const handleClickInEditor = (e) => {
if (e.target.className.includes('clear-indicator') || isMultiselectOpen) return;
e.stopPropagation();
selectRef.current?.onControlMouseDown(e);
};
const setInputValue = (values) => {
setSelected(values);
setExposedVariables({
@ -457,16 +467,9 @@ export const MultiselectV2 = ({
_width={_width}
top={'1px'}
/>
<div
className="w-100 px-0 h-100"
onClick={() => {
if (!isMultiSelectDisabled) {
fireEvent('onFocus');
setIsMultiselectOpen(!isMultiselectOpen);
}
}}
>
<div className="w-100 px-0 h-100" onMouseDownCapture={isEditor && handleClickInEditor}>
<Select
ref={selectRef}
menuId={id}
isDisabled={isMultiSelectDisabled}
value={selected}
@ -495,8 +498,8 @@ export const MultiselectV2 = ({
controlShouldRenderValue={false}
isSearchable={false}
onMenuOpen={() => {
fireEvent('onFocus');
setIsMultiselectOpen(true);
fireEvent('onFocus');
}}
onMenuClose={() => {
setIsMultiselectOpen(false);