V6 Selectbox with itemComponent to V7 Combobox

[muhammedaksam]

Hi there. I was using V6 since today. My question is going to be little different.

I had this select box using itemComponent prop. It was searchable and creatable at the same time with custom itemComponent. Since itemComponent prop is no longer being used with Select I had to use Combobox. I looked for each and every Combobox example.

https://mantine.dev/combobox/?e=SelectOptionComponent this is working fine to create previous itemComponent. But to make it searchable input I had to remove component="button" type="button" from InputBase. But when I do this I could't use

{selectedOption ? (
  <SelectOption {...selectedOption} />
) : (
  <Input.Placeholder>Pick value</Input.Placeholder>
)}

with it. What could be the best way to make it like previous itemComponent, but at the same time searchable and creatable?

My previous code piece(Which was working fine with V6. It was using itemComponent, creatable and searchable at the same time.):

const SelectComponent = forwardRef(
  ({ code, description, ...others }, ref) => {
    return (
      <div ref={ref} {...others}>
        <Group noWrap>
          <div>
            <Text size="sm">
              <Text fw={700} span inherit>
                {t("componentcode")}:{" "}
              </Text>
              {code}
            </Text>
            <Text size="xs">
              <Text fw={700} span inherit>
                {t("componentdescription")}:{" "}
              </Text>
              {description}
            </Text>
          </div>
        </Group>
      </div>
    );
  }
);
SelectComponent.displayName = "SelectComponent";

<Select
  disabled={!uForm.values.brand}
  itemComponent={SelectComponent}
  data={
    state.Brands.filter(
      (x) => x.value === uForm.values.brand
    ).flatMap((y) => y.components) || []
  }
  filter={(value, item) =>
    item.label
      .toLowerCase()
      .includes(value.toLowerCase().trim()) ||
    item.description
      .toLowerCase()
      .includes(value.toLowerCase().trim())
  }
  label={t("component")}
  nothingFound={t("nothingfound")}
  clearable
  searchable
  creatable
  getCreateLabel={(query) => `+ ${t("create")} ${query}`}
  onCreate={(query) => {
    createComponent(query);
  }}
  value={uForm.values.component}
  onChange={(e) => handleComponentChange(e)}
/>

[rtivital]

You can use renderOption in v7 – https://mantine.dev/core/select/#renderoption

[realyuki]

how to use renderOption with select group?

[rtivital]

It is a bug that will be fixed in one of the next versions

[pankajkscope]

Hi @rtivital
I am also having the same issue.
previously I was using V6 but now I have updated all the mantine packages 7.9.1

How can we use itemComponent now?

export const CustomSelectItem = forwardRef<HTMLDivElement, ItemProps>(
({ label, icon: Icon, ...others }: ItemProps, ref) => (
<div ref={ref} {...others}>

{Icon && }
{label}


)
);

CustomSelectItem.displayName = "CustomSelectItem";

<Select
placeholder="Select Operator"
size="xs"
value={filterRow.operator}
itemComponent={CustomSelectItem}

    maxDropdownHeight={400}
    data={getOperatorByType(filterType)}
    onChange={(value: string | null) => {
      valuesListHandler.setItemProp(rowIndex, "operator", value as FilterOperatorOptions);
      if (!tableRef.current) return;
      tableRef.current.setColumnFilterFns((prev) => {
        return { ...prev, [filterRow.id]: value ?? "" };
      });
    }}
/>