Search within select focus

Topic: Search within select focus

boris.net free asked 5 years ago

Expected behavior As per your wiki example pro component (I use pro version) when first click into Search within select element, it focuses on input searchbox so I can start typing straight away.

Actual behavior

Using the code example provided, such focus is not happening. What code do we have to use to make the component focus on the searchbox and avoid an extra click as per your wiki example?

Resources (screenshots, code snippets etc.)

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

<p>Hi <a href="/profile/?id=71529" target="_blank" rel="nofollow">@boris.net</a>,</p>

<p>Can you test my code? I made the setFocus function for search input when you open select. </p>

<pre class="prettyprint"><code>import React, { Component } from 'react';
import { MDBSelect } from 'mdbreact';

class SelectPage extends Component {
  state = {
    options: [
      {
        text: 'USA',
        value: '1'
      },
      {
        text: 'Germany',
        value: '2'
      },
      {
        text: 'France',
        value: '3'
      },
      {
        text: 'Poland',
        value: '4'
      },
      {
        text: 'Japan',
        value: '5'
      }
    ]
  };

setFocus = e => {
    const search = e.target.parentElement.querySelector('#selectSearchInput');

setTimeout(() => {
      search.focus();
    }, 100);
  };

render() {
    return (
      <div>
        <MDBSelect
          search
          options={this.state.options}
          selected='Choose your option'
          label='Example label'
          onClick={this.setFocus}
        />
      </div>
    );
  }
}

export default SelectPage;
</code></pre>

<p>Best regards, Konrad.    </p>

Please insert min. 20 characters.

Hi @boris.net,

Can you test my code? I made the setFocus function for search input when you open select.

import React, { Component } from 'react';
import { MDBSelect } from 'mdbreact';

class SelectPage extends Component {
  state = {
    options: [
      {
        text: 'USA',
        value: '1'
      },
      {
        text: 'Germany',
        value: '2'
      },
      {
        text: 'France',
        value: '3'
      },
      {
        text: 'Poland',
        value: '4'
      },
      {
        text: 'Japan',
        value: '5'
      }
    ]
  };

  setFocus = e => {
    const search = e.target.parentElement.querySelector('#selectSearchInput');

    setTimeout(() => {
      search.focus();
    }, 100);
  };

  render() {
    return (
      <div>
        <MDBSelect
          search
          options={this.state.options}
          selected='Choose your option'
          label='Example label'
          onClick={this.setFocus}
        />
      </div>
    );
  }
}

export default SelectPage;

Best regards, Konrad.

Add comment

boris.net free answered 5 years ago

0 0 Best answer

@Konrad Stępień I've purchased pro React version primarily for this component. Showcasing JQuery functionality pretending to be a React component is wrong on so many levels. I have a client demo coming up in 1 weeks time. What are the suggestions there for me to get this working like in the Demo?

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer