Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Dec 07 17:32
    brianespinosa commented #4303
  • Dec 06 05:10
    abilash-cts commented #4303
  • Dec 04 21:21
    brianespinosa commented #4303
  • Dec 01 06:55
    abilash-cts edited #4303
  • Dec 01 06:54
    welcome[bot] commented #4303
  • Dec 01 06:54
    abilash-cts opened #4303
  • Nov 29 11:29
    elee-it commented #4233
  • Nov 26 17:28
    layershifter commented #4233
  • Nov 26 15:47
    nwrahnema commented #4302
  • Nov 26 15:46
    nwrahnema commented #4302
  • Nov 26 15:28
    nwrahnema edited #4302
  • Nov 26 15:27
    welcome[bot] commented #4302
  • Nov 26 15:27
    nwrahnema opened #4302
  • Nov 26 15:07
    elee-it commented #4233
  • Nov 25 09:00
    layershifter labeled #4301
  • Nov 25 09:00
    layershifter labeled #4301
  • Nov 25 09:00
    layershifter commented #4301
  • Nov 24 22:12
    natanlao opened #4301
  • Nov 24 00:35
    joaomrsouza commented #3637
  • Nov 19 13:32
    tomking2 commented #4176
David Constantine
@Kublick You can try as={<Link to="">Add User</Link>}
I noticed that: disabled FormCheckbox, with a Popup as label, will show the popup when standalone, but will not, when wrapped inside Form.
probably intended behavior, no complaint there, but can someone explain why is it so? and is there a workaround?
Dima Lapeto
Hello! I see that Semantic-Org/Semantic-UI-React#3174 is closed and @layershifter has done Semantic-Org/Semantic-UI-React#3734 , but I've already had this problem. Is it really fixed?
Don't use semantic UI.
It's abandoned project, the owner did not pass ownership to anyone for some stupid reasons which led to current situation of great framework being totally not usable.
There is Fomantic UI which is a maintained fork
Dima Lapeto
@murbanowicz thanks! But how can I use Fomantic UI with React?
not sure if possible yet :/
I know, it sucks... such a great project abandoned
at this moment much safer to go with either MUI or Ant
Dima Lapeto
@murbanowicz Ok, finally we haven't all fixes from SUIR github repo in NPM module v.0.88.2? That's right? :((
Gary Berger
Hello all, are there any patterns for Search component such that if an element is not found in the results state one can choose the value input in the text input?
Balla Attila
anyone alive here? :D
Oleksandr Fediashov
@murbanowicz SUIR 1.0.0 was released on the previous week
Guilherme Taschetto
Dropped Semantic-UI for material-ui a long time ago. No regrets. material-ui is a real project and will be for a long time.
Guilherme Taschetto
@vinchbr don't use SUI. go for another library.
Balla Attila

@taschetto If you don't like the lib then how about moving on from here?! Your comments are useless.

I'm making a small hobby project with this right now, noted the following issues:
Progress component has a min-width css property, making it incorrectly display very low or 0% progress.

Tab component doesn't use keys when looping through it's tabs, React doesn't like this.

Somewhere in Tab or Button there is a call to findDOMNode, which is deprecated.

Oleksandr Fediashov

Progress component has a min-width css property, making it incorrectly display very low or 0% progress.

It's intentional and may be confusing, but can be fixed with CSS if you don't like it :)

Tab component doesn't use keys when looping through it's tabs, React doesn't like this.

Do you have an example? Tab component needs API redesign as it's API is confusing, I am slowly working on it.

Somewhere in Tab or Button there is a call to findDOMNode, which is deprecated.

It's deprecated only for StrictMode now, but you're correct. We have a tracking issue for Semantic-Org/Semantic-UI-React#3819 and I am going to push there some updates soon.

@murbanowicz The situation with Semantic UI is not good at all, it's great that community maintains Fomantic UI. Small goal is to fix compatibility issues with Fomantic (Semantic-Org/Semantic-UI-React#4021), bigger - introduce more features that we added recently.
Marco 'Lubber' Wienkoop
The progress 0% issue was fixed in Fomantic-UI by fomantic/Fomantic-UI#625
You may try to use the progress.css from there
Javier Castro
hard to question this on this channel, but which libraries besides material-ui are good alternatives to semantic-ui-react ?

Hi I'm trying to test on change for React Semantic-UI dropdown with

await act(async () => {
    const input = getByTestId("dropdown-test-id").firstChild; // the input field
    await fireEvent.change(input!, { target: { value: 2}})

and the component is <Form.Dropdown />. But this isn't working. Any idea what the fix is?

Oleksandr Fediashov
@ZeroDarkThirty In this case you need to click on a .dropdown to open it and then select .item via click
Christian Perry
I'm trying to figure out how to import semantic-ui themes into my semantic-ui-react configuration. I've followed the steps at https://react.semantic-ui.com/theming, and after running the bootstrap script, it installs semantic-ui successfully, but there's no theme folder as there would be in a semantic-ui installation. How do I gain access to the semantic-ui themes?
hey, is it possible to use Semantic-UI-react with fomantic ui?
Christian Perry
@boranbasar Can you describe your use case?
Hello, I'm using latest version of react-semantic ui.
Dropdown component with "clearable" props not showing me cross icon to clear.
Please help :(

Hey folks! I want to add a button to a multi select Dropdown that will clear the selection. How is that possible? See photos and code here. https://stackoverflow.com/questions/65309428/how-to-clear-multiselect-dropdown-in-semantic-ui-react-using-a-button

I've checked all the docs (SUIR and SUI) and only found the built-in clearable feature but am not sure how to call that externally.

Thank you!


    const dropdownButtons = () => {
        return (
                <Button positive size='mini'>
                <Button grey size='mini' onClick={() => console.log('I want to reset the multi select dropdown')}>
                <Divider />
how do I customize border of celled Grid?
^ to anyone else also wondering, I removed the box-shadow and add my own border styling using border
Dean Harmon

I am having issues getting my site.variables to update the site css. Even the example in theming is not working as I would expect it too.

I am using the semantic-ui-less library & have manually moved the _site folder & theme.config file to my project's source folder (I don't know how to do this with npx & bootstrap when I am using craco with yarn workspaces).

The basic default styles and components are working well, but for some reason the vars I am setting are not being reflected.

Anyone have an idea of what might be going on?
How can i load a dropdown (basic clearable dropdown and not multi-select) with a preselected item?
James Cote
Hi I'm trying to add a Sidebar component to my app, but its height seems to take up the entire page rather than just the height of the viewport. Additionally, it does not stick to the side of the page. I understand that adding Sticky component is erratic inside a Sidebar.Pushable (which my Sidebar is inside of), but how should I style my sidebar so that (1) its height does not take up the entire page, just the viewport height, and (2) sticks to the side of the page so that no matter where I am on the page, when I open the sidebar it will be positioned relative to that spot on the page.
MD. Rizwan Raza
how can update loading props in Button using ref
Sabrina Danielle Green

Hello, everyone! I hope this finds you well. Please help if you can. I have a 3 row grid. When scaling/zooming in everything works as expected; however, when I add the inline style object and height attribute, the top row starts to intersect with the rows below. I am having trouble preventing this. I've tried adding a max height.

Here's a link to a very basic example: https://codesandbox.io/s/zoo-grid-forked-2x8q9

Adam Cyffka
hello guys, I have a problem with the z-index of the dropdown in a table, any idea?
Harsh Choudhary
Screenshot 2021-08-08 at 4.08.10 PM.png

Hi. Not able to open https://react.semantic-ui.com/ in India. Says - Your requested URL has been blocked as per the directions received from Department of Telecommunications, Government of India. Please contact administrator for more information.

Anybody has any information. Is it a mistake? https://semantic-ui.com/ is working though.

Vishesh Mangla
hello, I m stuck with the Tab component. https://stackoverflow.com/questions/68715355/typeerror-testslist-is-not-iterable . Please help here
codesandbox link is there only
Paris Morgan

Hi all, question about how to reconcile input from the keyboard and mouse. The behavior I would like:

  • There is only one selection in the dropdown and it is highlighted.
  • I can use the keyboard to move the selection up and down.
  • If I bring my mouse over an item then the selection moves to that item.
  • If I use the keyboard to move the selection up and down then 1) the mouse disappears 2) I move up / down.

Everything above is working except for If I bring my mouse over an item then the selection moves to that item. So, my question:

  • How do I change the selection in the dropdown when the mouse hovers over it? Specifically without triggering a onChange(), as this I'm not fully selecting it, just changing the focus.
^ I have attached an example of my desired behavior above - https://replit.com/ has a good example of a dropdown that does this. Thanks for any help!
Paris Morgan
Cornelia Plott
Hi, we like to use Dropdown with multi and search. On the onSearchChange we fetch data. But if we start a new search, already selected items disappear....?! You can look into the code example in Stack Overflow: