Render dmc.Select values similar to how renderOptions is defined

[Dekermanjian]

Hi I am not sure if this is a feature request. I looked through the docs and the repo pretty extensively and could not find anything related to this topic.

I am using a custom renderOption with dmc.Select and would like when a value is selected from the drop down that the render of that value inside the select box is the same as it is in the dropdown.

Is this possible?

[AnnMarieW]

Hi @Dekermanjian

Yes, I would consider this a feature request.

This is not possible with the current Mantine Select. You can see this same example in the upstream Mantine docs

To do this would require a custom Select component, which is not planned for the DMC library, but you could make it as a separate project.

Here is an example of the custom component https://mantine.dev/combobox/?e=SelectOptionComponent

[Dekermanjian]

Thank you, @AnnMarieW!

That is very helpful! Does DMC have a way to integrate custom components or would I need to have a separate forked project that I install after building the custom components?

[AnnMarieW]

This came up on our discord recently as well.

I recommend starting with the dash-typescript-components-template

Next you will have to set the Mantine as a peer dependency and not bundle it, else your new component will not recognize the dmc.MantineProvider. You can find details in this repo NiklasKappel/many_select#1

Once there is a good example of making a custom dash mantine component, it would be great to include a tutorial in our docs. If you decide to make this component, could you share your experience or any tips back here?

[AnnMarieW]

@Dekermanjian
I'm going to move this over to discussions since we are not planning to add this feature in the near term, but I'd still like to keep the topic open to collect more information about creating custom components for DMC.