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}
/>
);
}