diff --git a/src/renderer/components/groups/MenuIconRowGroup.tsx b/src/renderer/components/groups/MenuIconRowGroup.tsx index 8bfb362d3..0601a0f1d 100644 --- a/src/renderer/components/groups/MenuIconRowGroup.tsx +++ b/src/renderer/components/groups/MenuIconRowGroup.tsx @@ -1,12 +1,30 @@ import { Box } from '@chakra-ui/react'; import { memo } from 'react'; +import { DropDownInput, InputSchemaValue } from '../../../common/common-types'; import { getUniqueKey } from '../../../common/group-inputs'; -import { getPassthroughIgnored } from '../../helpers/nodeState'; +import { NodeState, getPassthroughIgnored } from '../../helpers/nodeState'; +import { useValidDropDownValue } from '../../hooks/useValidDropDownValue'; import { IconList } from '../inputs/elements/IconList'; import { InputContainer, WithoutLabel } from '../inputs/InputContainer'; import { IconSet } from './IconSetGroup'; import { GroupProps } from './props'; +const IconListWrapper = memo( + ({ input, nodeState }: { input: DropDownInput; nodeState: NodeState }) => { + const setValue = (value: InputSchemaValue) => nodeState.setInputValue(input.id, value); + const value = useValidDropDownValue(nodeState.inputData[input.id], setValue, input); + + return ( + + ); + } +); + export const MenuIconRowGroup = memo(({ inputs, nodeState }: GroupProps<'menu-icon-row'>) => { return ( @@ -30,13 +48,10 @@ export const MenuIconRowGroup = memo(({ inputs, nodeState }: GroupProps<'menu-ic if (item.kind === 'dropdown' && item.preferredStyle === 'icons') { return ( - nodeState.setInputValue(item.id, item.def)} - value={nodeState.inputData[item.id]} - onChange={(value) => nodeState.setInputValue(item.id, value)} + nodeState={nodeState} /> ); }