Oddity with Jimu Select and React

593
2
10-05-2021 12:14 PM
CourtneyMenikheim
Occasional Contributor

Hello,

(cross posting from the Experience Builder community, in case another dev might have some ideas)

We are writing an application in Experience Builder and trying to use the select component  to allow the user to determine which county they are looking at. The list of eligible counties is returned from a service query. The code in question is below:

let countySelectOptions = [];
      results.features.forEach(feature => {
        countySelectOptions.push({
          label: feature.attributes.Cty,
          value: feature.attributes.Cty
        });
      });

      let countySelect = <Select
        id="countyInput"
        className="querySearchInput"
        placeholder="Please select county to search"
      >
        {countySelectOptions.map((countySelectOption) => { return <Option value={countySelectOption.value}>{countySelectOption.label}</Option> })}
      </Select>;

      ReactDOM.render(countySelect, this.countySelectPlaceholder);

  This works for HTML <select> and <option> tags, but breaks when using the Jimu-ui Select and Option. We'd like to go with the jimu-ui components, since they look a bit more polished and are consistent with our app overall.

Any advice?

Courtney Menikheim | Application Developer | @thecmenikheim
0 Kudos
2 Replies
MarkEastwood
Occasional Contributor II

@CourtneyMenikheim were you ever able to solve this issue? 

0 Kudos
CourtneyMenikheim
Occasional Contributor

If I remember correctly, we couldn't find anything ultimately reworked the UI for this section. An Esri employee replied on the sister thread to this one (link) after the decision had already been made. They may be able to assist.
It's been almost a year and a half since I've posted. I would hope someone found a solution or the underlying issue was addressed. I do more backend work now, so I don't have to deal with importing UI components as much.

Courtney Menikheim | Application Developer | @thecmenikheim