diff --git a/example/src/App.tsx b/example/src/App.tsx index d367454..94be675 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -82,10 +82,10 @@ const _options = items.map((label) => ({ label, value: label.toLowerCase() })) const StatefulMultiSelect: FC< Omit & Partial> -> = ({ onChange: _onChange, value: _value, ...props }) => { +> = ({ onChange: _onChange, value: _value, options: __options, ...props }) => { const { value, options, onChange } = useMultiSelect({ value: _value || props.single ? '' : [], - options: props.options!, + options: __options!, onChange: _onChange, }) diff --git a/src/MultiSelect.tsx b/src/MultiSelect.tsx index 03f6cf6..6e4a033 100644 --- a/src/MultiSelect.tsx +++ b/src/MultiSelect.tsx @@ -109,7 +109,7 @@ export const SelectLabel = memo>((props) => { SelectLabel.displayName = 'SelectLabel' export const SelectOptionItem = memo( - ({ value, label, index, selected, ...props }) => { + ({ value, label, index, selected, created, ...props }) => { const { highlightedRef, option, ...itemProps } = useSelectItem({ value, label, @@ -123,7 +123,16 @@ export const SelectOptionItem = memo( {...props} {...itemProps} > - {option?.label || value} + + {option?.label || value} + {!!created && ( + + + New + + + )} + ) } @@ -148,6 +157,7 @@ export const SelectList = memo(() => { value: optionItem.value, label: optionItem.label || labelFromValue(optionItem.value), selected: optionItem.selected, + created: optionItem.created, index, } },