I'm a beginner at using the NextJS Framework. This is saleor dashboard code. Inside the textfield, there are multiple texts therefore, I need help on how I extract the toggle menu inside the textfield and show it as a card without clicking on the Arrow Dropdown button. Is there any way to do that ??
<TextField
InputProps={{
...getInputProps({
placeholder
}),
endAdornment: (
<div className={classes.adornment}>
{endAdornment}
<ArrowDropdownIcon />
</div>
),
id: undefined,
onBlur,
onClick: toggleMenu,
onFocus: () => {
if (fetchOnFocus) {
fetchChoices(inputValue);
}
},
ref: anchor
}}
error={error}
helperText={helperText}
label={label}
fullWidth={true}
disabled={disabled}
/>
{isOpen && (
<Popper
anchorEl={anchor.current}
open={isOpen}
style={{
width: anchor.current.clientWidth,
zIndex: 1301
}}
placement="bottom-end"
>
<MultiAutocompleteSelectFieldContent
add={
add && {
...add,
onClick: () => {
add.onClick();
closeMenu();
}
}
}
choices={choices.filter(
choice => !value.includes(choice.value)
)}
displayCustomValue={displayCustomValue}
displayValues={displayValues}
getItemProps={getItemProps}
hasMore={hasMore}
highlightedIndex={highlightedIndex}
loading={loading}
inputValue={inputValue}
onFetchMore={onFetchMore}
/>