Swap Filter Select Input Icon Locations

[loughlinclaus3]

I'd like to swap the positions of the close/dropdown icons for the filter select input textfields (the select and multi-select filterVariants).

Basically, I'd like this:

To look like this:

Summarized reasoning:

• dropdown icon button's broken.
• developers should be able to remove it.
• Swapping the icons in a specific manner allows for developers to remove icon neatly.
• I'm going to open a PR with the swap's implementation.

In-depth reasoning for this switch:

I think this would be better for a variety of reasons, primarily centered around the fact that the ArrowDropDownIcon cannot be clicked to open/close the dropdown menu, due to the presence of the CloseIcon endAdornment. I've done a bit of research, and there doesn't seem to be a simple solution that won't have drawbacks. The CloseIcon is important for the select filterVariant, as it is the only way (other than opening the Column Actions menu, and clearing sort from there) to remove all filterValues from that variant (since the Filter by ____ dropdown option is disabled by default), so ideally, users shouldn't need to overwrite the endAdornment.

That leaves the ArrowDropDownIcon. From what I can tell, there doesn't seem to be a simple solution that allows for the icon to become clickable again (let me know if I'm mistaken, and there's some easy fix that I missed). Next best option for developers might be to try to remove the icon, so that users don't try clicking said icon. However, on select filterVariants, the CloseIcon's mr is hard-set to 20px (see here), which just leaves an awkward blank space where the icon once was.

There is currently no way for developers to remove the mr: 20px from the endAdornment, short of overwriting the endAdornment (which, as mentioned above, is not ideal for select filterVariants, due to the importance of the CloseIcon's function).

If the icons were switched however, by removing the mr: 20px from the endAdornment, and explicitly declaring the SelectProps: {IconComponent: () => <ArrowDropDownIcon /> }, then users would be able to remove the broken ArrowDropDownIcon button from all select filterVariants with a muiFilterTextFieldProps: ({ column: { columnDef: { filterVariant }, }, }) => filterVariant.endsWith("select") ? { SelectProps: { IconComponent: () => undefined }, } : undefined,.

Developers will also still be able to remove/override the endAdornment without leaving an awkward blank space (with a simple {InputProps: {endAdornment: undefined}}). Not sure why they'd want to, but it's important that the option is still there.

I'm going to open a PR with this switch in mind. Let me know what you think of the swap.

[loughlinclaus3]

While reviewing the select filterVariant endAdornments, I noticed that there's always a bit of padding right applied to the selectDisplay's div to account for the icon's usual placement, so I went and removed the pr from the select variants too.

[KevinVandy]

@loughlinclaus3 So in v1, I actually used to have how you do, but then I changed it to conform with MUI's own Autocomplete component's design so that it will be consistent. I'm not sure I want to go back to the other way by default.

[loughlinclaus3]

That's a fair point, consistency is important. I've been converting from a different table package that didn't have the column filter functionality, and using autocomplete hadn't really crossed my mind, despite seeing examples frequently.

It does still bother me a bit that the DropDownArrowIcon is broken on the select filterVariants. However, the icon works as intended with the autocomplete filterVariant, so I'll just switch to that.

Before closing the PR associated with this discussion, I feel that line 471 of the MRT_FilterTextField.tsx would still be a good addition to the code, as it removes some unnecessary whitespace from the default select filter value.

Thanks for the feedback.

[KevinVandy]

If there's a way to fix the icon and make it clickable, then yeah, open to that