1. Feedback
  2. React
  3. 40263

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

0
Votes

listbox filter not working in mobile browsers


import * as React from "react";
import {DataManager, Query } from "@syncfusion/ej2-data";
import { ListBoxComponent, Inject, SelectionSettings } from '@syncfusion/ej2-react-dropdowns';

import * as data from "./destinations.json";

export class DepartureInput extends React.Component {

  constructor() {
    super();
    this.state = {
      value: '' ,
     displayName:''
 
  };
  }

  handleChange = (e) => {
    this.setState({ value: e.target.value });
  };
  selectionSettings = { mode: 'Single'};

  temp = 'Location';
  count=1;

  searchData =data[this.temp].map(obj => ({ ...obj, id: this.count++ })) ;

  groupFields = { groupBy: 'groupName', text: 'Displayname', value: 'id' };
  fields = { text: "Displayname", value: "id" };

 
 
  onFiltering = (e) => {
    let query = new Query();
    query =
      e.text !== "" ? query.where("Displayname", "Contains", e.text, true) : query;
    e.updateData(this.searchData, query);
  };

  getDisplayName(iata){
    let dataa = new DataManager(this.searchData).executeLocal(new Query().where("id", "equal", iata, true));
    console.log( dataa);
    this.setState({ displayName: dataa[0]['Displayname'] });
     
  }

  onChange() {
   
    this.setState({ value: this.listboxobj.value[0] });
    this.getDisplayName(this.listboxobj.value[0]);
}

  render() {
    return (
      <div className="control-pane">
        <div className="control-section">
          <div id="departurenput" className="gap-2">
            <div
              className="searchbox-container"
             
            >
              <input
                aria-invalid="false"
                id="departure-field"
                placeholder="Add Airports"
                rows="3"
                tabIndex="0"
                type="text"
                readonly="true"
                variant="button"
                className="searchbox-input"
                value={this.state.displayName}
              />
              <label
                for="departure-field"
                className="searchbox-label gap-2"
              >
                <i className="fas fa-plane-departure" />
                <span id='text'> Where from?</span>
               
              </label>
            </div>

            <ListBoxComponent
              id="Departurelist"
              showCheckBox={true}
              ref={(scope) => (this.listboxobj = scope)}
              dataSource={this.searchData}
              fields={this.groupFields}
              allowFiltering={true}
              filtering={this.onFiltering.bind(this)}
              change={this.onChange.bind(this)}
              selectionSettings={this.selectionSettings}
            >
              <Inject services={[SelectionSettings]} />
            </ListBoxComponent>
          </div>
        </div>
      </div>
    );
  }
}

export default DepartureInput;