CODEWITHSUNDEEP
reactjsmaterial-designmaterializematerial-uiformsy-material-ui
Mark Shust at M.academy
Mark Shust at M.academy

Reputation: 6429

material-ui: SelectField inner focus for MenuItem

I'm implementing a SelectField with about 30 choices into a mobile app. Things work great, however it's used for a lot of rapid-fire data entry. Right now, I'm limited to showing the first 10 or so items because of mobile screen size.

On Dropdown focus, I'd like to focus on the middle (15th or so) MenuItem element, because the most selected elements are from around the middle of the list. Without this, the user has to tap & scroll each time on the dropdown for each data entry.

Is there any way to do this easily?

Upvotes: 0

Views: 1085

Answers (1)

CaseyC
CaseyC

Reputation: 1482

I don't think there is an easy way to do this but it can be done. You can actually set an empty <MenuItem/> in your select field in the middle of your select list where you'd like to focus when your app is being used on mobile. The empty <MenuItem/> won't show in the list.

You would then use the onFocus property to set state to the value of your empty <MenuItem/> when the <SelectField/> gains focus. This will make the select field open to the place in your list where the empty <MenuItem/> is.

You'll probably want to make sure your empty item has some unique value to it and then perform validation checks etc. Kind of a hack but it works. Hope this helps.

We can use this basic example to demonstrate (uses es6 fat arrow functions and modified from MaterialUI docs).

  constructor(props) {
    super(props);
    this.state = {value: null};
  }

  handleChange = (event, index, value) => this.setState({value});

  handleFocus = () => {
     if(//Do checks for screen size here, if mobile){
        this.setState({value: 9999});
     }     
  }

  render() {
     const items = [
         <MenuItem value={0} primaryText='1'/>
         <MenuItem value={1} primaryText='2'/>
         <MenuItem value={2} primaryText='3'/>
         <MenuItem value={9999} />
         <MenuItem value={3} primaryText='4'/>
         <MenuItem value={4} primaryText='5'/>
    ];

    return (
      <SelectField maxHeight={300} value={this.state.value} onChange={this.handleChange} onFocus={() => this.handleFocus()}>
        {items}
      </SelectField>
    );
  }
}

Upvotes: 0

Related Questions