Adding PNGs to DropDownList as icons

[Samuel]

Hello,

When I add PNGs to my Drop Down List component the listOnChange function fails to trigger and therefore the state never gets updated. Is there something I'm missing here? Outtakes of my css file can be found at the bottom of the snippet.

Thanks.

class Classname extends React.Component {

constructor() {

super(...arguments);

this.state = {

choice: ""

};

this.fields = { text: 'Type', iconCss: 'Class', value: 'Id' };

this.sortFormatData = [

{ Class: 'one', Type: 'First', Id: '1' },

{ Class: 'two', Type: 'Second', Id: '2' }

];

}

listOnChange = (args) => {

if (args.isInteracted) {

if (args.value == "First") {

this.setState({ choice: 'firstOption' })

}

else if (args.value == "Second") {

this.setState({ choice: "secondOption" })

}

}

}

render() {

return (

<div>

<DropDownListComponent id="ddlelement" change={this.listOnChange} dataSource={this.sortFormatData} fields={this.fields} placeholder="placeholder" />

</div>

);

}

}

export default Classname;

///////// CSS //////////

.e-list-icon {

line-height: 1.3;

padding-right: 10px;

text-indent: 5px;

}

.one {

content: url(Assets/one.png);

height: 1.5em;

width: auto;

}

.two {

content: url(Assets/two.png);

height: 1.5em;

width: auto;

}

[Deepak Ramakrishnan]

Hi Samuel,  

  

Thanks for contacting Syncfusion support. 

Currently we are checking the reported query in our end. We will update further details in 2 business days (July 8, 2021). We appreciate your patience until then.  

Regards, 

Deepak Ramakrishnan. 

[Berly Christopher]

Hi Samuel, 

  

Thanks for the patience. 

  

We have checked the shared code example. While changing the value from the DropDownList then change event fired correctly at our end. Also, the state value did not update on value change action since you have compared the args.value with text field mapped variable (“Type”). But, args.value will return the corresponding value of the value field of the DropDownList component. So, we have modified the code and attached it below.  

  

listOnChange = args => { 

    if (args.isInteracted) { 

      console.log('Change event triggered'); 

      if (args.value == '1') { 

        this.setState({ choice: 'firstOption' }); 

        console.log(this.state.choice); 

      } else if (args.value == '2') { 

        this.setState({ choice: 'secondOption' }); 

        console.log(this.state.choice); 

      } 

    } 

  }; 

 

 

 

  

Sample: https://stackblitz.com/edit/react-16zo1r?file=index.js  

  

Regards, 

Berly B.C