CODEWITHSUNDEEP
reactjsmeteorreactive-programmingsemantic-uisemantic-ui-react
monchisan
monchisan

Reputation: 658

Meteor Semantic-UI-React: focusing components

I am building an app with Meteor, React and Semantic-UI. I am new in these frameworks/libraries. After reading the docs, I still don't understand how to set the focus on a component, because some say you can't do it yet, others say that you can but their example doesn't work for me. In the below example the options are defined as constants and imported from another document, and the changeHospital & changeActivity functions just set the state of the hospital and activity with the data.value from the options:

          <Form.Field
            label='Hospital'
            control={Select}
            fluid
            search
            value={this.state.hospital}
            placeholder='Select hospital'
            options={hospitals}
            onChange={this.changeHospital}
          />

          <Form.Field
            label='Activity'
            control={Select}
            search
            fluid
            value={this.state.app}
            placeholder='Select activity'
            options={apps}
            onChange={this.changeActivity}
          />

What do I want?

After submitting the first field I want to change the focus on the next field automatically without pressing the tab key or selecting it with the mouse cursor.

Later edit

If you can understand more than me you can read the docs for the semantic-ui-react component at: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js

They say:

/** A dropdown can receive focus. */
tabIndex: PropTypes.oneOfType([
  PropTypes.number,
  PropTypes.string,
]),

Upvotes: 0

Views: 400

Answers (1)

Reason
Reason

Reputation: 1430

Disclaimer: I don't know semantic-ui-react, but I do know react, so this is a guess based on how you would solve it with a normal react input.

// Add ref to the field you want to focus
<Form.Field
    ref="activityField"
    label="Activity"
    control={Select}
    search
    fluid
    value={this.state.app}
    placeholder="Select activity"
    options={apps}
    onChange={this.changeActivity}
/>

// Update function from previous input
changeHospital() {
    ... // do what you already do, then change focus
    this.refs.activityField.focus()
}

Calling .focus() on a react input focuses it, but it's possible that Form.Field does not handle .focus() and in that case it won't work.

Upvotes: 1

Related Questions