Search within select focus


Topic: Search within select focus

boris.net asked 3 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.)


Konrad Stępień staff answered 3 years ago

Hi @boris.net,

A general MDBSelect refactor is planned.

We will try to introduce it in the near future.

Examples from the documentation come from jQuery technology, they are used only for presentation and hence this bug.

Sorry, for the problems.

Best regards, Konrad.


boris.net answered 3 years ago

@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?


Konrad Stępień staff answered 3 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.21.0
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No