React Select inside Semantic UI React

Question

I have a simple React Select as content prop in a Semantic UI React Popover component. I am constrained by each of the package versions inside the project (available in the following codesandbox https://codesandbox.io/s/wy194rz908):

React: ~15.5.0
ReactDOM: ~15.5.0
React-Select: ^2.1.1
Semantic UI React: 0.71.5

As you can see, the React Select options closes when a selection is done.

On the other hand, I found that updating React, React-DOM and SemanticUI to their latest versions make the feature work. As you can see, the selection is done and the Select options do not fold (available in the following codesandbox https://codesandbox.io/s/6y14qyykk3).

As I can not update update the React and SUIR, what workaround should I follow in order to make this work?

Thanks!

Mosè Raguzzini · Accepted Answer · 2018-12-19 12:58:11Z

2

You have to use a Controlled Popup Component, as stated in docs:

import React from 'react'
import { Button, Popup } from 'semantic-ui-react'

class PopupExampleContextControlled extends React.Component {
  state = {}

  toggle = () => this.setState({ open: !this.state.open })

  handleRef = node => this.setState({ node })

  render() {
    const { node, open } = this.state
    return (
      <div>
        <Button content='Open controlled Popup' onClick={this.toggle} />
        <Popup context={node} content='Hello' position='top center' open={open} />
        ---------->
        <strong ref={this.handleRef}>here</strong>
      </div>
    )
  }
}

export default PopupExampleContextControlled

In this way you can control when popup opens and closes.

answered Dec 19, 2018 at 12:58

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Casanellas · Accepted Answer · 2018-12-19 12:12:42Z

0

I am controlling the Popup using the open prop available through its props api. I change its state from true to false when clicking the caret down icon button.

Solution: https://codesandbox.io/s/rmoxx98qkn

answered Dec 19, 2018 at 12:12

David Casanellas

8732 gold badges11 silver badges18 bronze badges

2 Comments

Mosè Raguzzini Over a year ago

If you click in the textbox then outside textbox popup closes anyway

David Casanellas Over a year ago

yeah, I still need to fix where to set the onBlur

Collectives™ on Stack Overflow

React Select inside Semantic UI React

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related