Fomantic-ui: [Dropdown] clearable not compatible with Semantic-UI-React

[renato]

I don't know how compatible should Fomantic be with Semantic-UI-React, but I'm trying to use a <Select clearable /> on my application and the delete icon is only shown if using the original SUI 2.4.1. Using [email protected] the caret down icon is kept but when clicked the value is cleared as expected.

[naterexw]

Here is a Next.js + Fomantic-UI + React starter template
https://github.com/skydiver/nextjs-semantic

[renato]

@naterexw I'm sorry, but how is that template useful?

I mean, I've a project in production with Semantic-UI-React using Fomantic insetad of Semantic, the issue here is that specifically the Select clearable prop isn't working as expected, the delete icon for clearing the Select doesn't show up and the caret down icon works as a delete instead of opening the dropdown.

I just reported it because I thought existing Semantic features would still work and I would just miss the new features from Fomantic, if that's a goal I suppose this is something to fix, everything else is working as expected.

[NicholasG04]

I'm having the same issue using a Dropdown clearable - it does not work unfortunately when using Fomantic-UI due to how it splits the delete and dropdown icons with my example...

Edit: I solved my problem by using the Semantic-UI-React standard method of replacing the dropdown icon but set the clear icon to use Font: Icons so that the font-awesome character would work with Fomantic-UI and changing content: '\f00d'

[davidroeca]

Also stumbled across this issue.

~I think one big problem I'm seeing here is that the implementation is pretty heavily reliant on some JS that's implemented differently in the SUI + SUI React packages. Since I'm only importing the CSS from fomantic, I don't get those updates in my project.~

~My caveman attempt was to work with my theme update site/modules/dropdown.overrides, site/modules/search.overrides, and site/modules/icon.variables, copy over anything that has remove and replace that with clear. However, now SUI react is expecting different behavior (maybe a second icon?) and it's hiding the icon that the css rules have changed, so I agree that the custom javascript approach in React is probably all that can be done here.~

Scratch that. Solved by using @NicholasG04's approach, by updating the src/site/modules/dropdown.overrides with the following:

/*******************************
        User Overrides
*******************************/
// Fix clearable dropdown
// See https://github.com/fomantic/Fomantic-UI/issues/1259
.ui.dropdown > .clear.icon:before {
  content: "\f00d";
  font-family: "Icons";
}