From 799fc1f51885fd6167051f2b58a5cad4d47322b8 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 25 Apr 2025 09:41:23 +0200 Subject: [PATCH] 1-3658/fix legal values selector issues (#9838) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes an issue with the new legal values selector where selecting an item from filtering or changing the checkbox state would move your focus to the top of the page. I think it's because we'd re-render the whole tree because of it, and this would clear your focus selection. To get around it, I've used the existing ResolveInput component. We might want to change this later as we get around to more input components (single values, etc), but for now, I think this is good enough. As a bonus, I get to delete the most annoying part of the EditableConstraints file 😄 The constraint still opens in edit mode for now, but I expect that to get resolved once we properly implement the split between editable and non-editable constraints that was started yesterday. --- .../RestrictiveLegalValues.tsx | 8 +- .../EditableConstraint.tsx | 145 ++---------------- .../EditableConstraintWrapper.tsx | 1 + .../LegalValuesSelector.tsx | 9 +- 4 files changed, 29 insertions(+), 134 deletions(-) diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx index 3d164a7f8b..3893efc8cc 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx @@ -158,10 +158,12 @@ export const RestrictiveLegalValues = ({ }; const handleSearchKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter' && filteredValues.length > 0) { + if (event.key === 'Enter') { event.preventDefault(); - const firstValue = filteredValues[0].value; - onChange(firstValue); + if (filteredValues.length > 0) { + const firstValue = filteredValues[0].value; + onChange(firstValue); + } } }; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx index c69ca5f1dd..fa19e6756d 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx @@ -1,21 +1,6 @@ import { IconButton, styled } from '@mui/material'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; -import { DateSingleValue } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue'; -import { FreeTextInput } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput'; -import { SingleLegalValue } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue'; -import { SingleValue } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue'; -import { - DATE_OPERATORS_SINGLE_VALUE, - IN_OPERATORS_FREETEXT, - IN_OPERATORS_LEGAL_VALUES, - NUM_OPERATORS_LEGAL_VALUES, - NUM_OPERATORS_SINGLE_VALUE, - SEMVER_OPERATORS_LEGAL_VALUES, - SEMVER_OPERATORS_SINGLE_VALUE, - STRING_OPERATORS_FREETEXT, - STRING_OPERATORS_LEGAL_VALUES, - type Input, -} from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput'; +import type { Input } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput'; import { DATE_AFTER, dateOperators, @@ -43,7 +28,7 @@ import { ReactComponent as CaseSensitiveIcon } from 'assets/icons/case-sensitive import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensitive.svg'; import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly'; import { AddValuesWidget } from './AddValuesWidget'; -import { LegalValuesSelector } from './LegalValuesSelector'; +import { ResolveInput } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput'; const Container = styled('article')(({ theme }) => ({ '--padding': theme.spacing(2), @@ -149,6 +134,7 @@ const OPERATORS_WITH_ADD_VALUES_WIDGET = [ ]; type Props = { + constraint: IConstraint; localConstraint: IConstraint; setContextName: (contextName: string) => void; setOperator: (operator: Operator) => void; @@ -172,6 +158,7 @@ type Props = { }; export const EditableConstraint: FC = ({ constraintChanges, + constraint, localConstraint, setLocalConstraint, setContextName, @@ -255,116 +242,6 @@ export const EditableConstraint: FC = ({ } }; - const Input = () => { - switch (input) { - case IN_OPERATORS_LEGAL_VALUES: - case STRING_OPERATORS_LEGAL_VALUES: - return ( - - ); - case NUM_OPERATORS_LEGAL_VALUES: - return ( - <> - Number(legalValue.value), - ) || [] - } - error={error} - setError={setError} - /> - - ); - case SEMVER_OPERATORS_LEGAL_VALUES: - return ( - <> - - - ); - case DATE_OPERATORS_SINGLE_VALUE: - return ( - - ); - case IN_OPERATORS_FREETEXT: - return ( - - ); - case STRING_OPERATORS_FREETEXT: - return ( - <> - - - ); - case NUM_OPERATORS_SINGLE_VALUE: - return ( - - ); - case SEMVER_OPERATORS_SINGLE_VALUE: - return ( - - ); - } - }; - return ( @@ -454,7 +331,19 @@ export const EditableConstraint: FC = ({ - + ); diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper.tsx index c4379c81d1..6dd2873b81 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper.tsx @@ -206,6 +206,7 @@ export const EditableConstraintWrapper = ({ error={error} contextDefinition={contextDefinition} removeValue={removeValue} + constraint={constraint} /> ); }; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/LegalValuesSelector.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/LegalValuesSelector.tsx index 8170595484..13a9580743 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/LegalValuesSelector.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/LegalValuesSelector.tsx @@ -133,9 +133,12 @@ export const LegalValuesSelector = ({ }; const handleSearchKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter' && filteredValues.length > 0) { - const firstValue = filteredValues[0].value; - onChange(firstValue); + if (event.key === 'Enter') { + event.preventDefault(); + if (filteredValues.length > 0) { + const firstValue = filteredValues[0].value; + onChange(firstValue); + } } };