[new_profile] Auto-select only site option

[zaliqarosli]

Brief summary of changes

Resolves issue #5380

Testing instructions (if applicable)

(make sure to run make dev when you switch branches)

1. On main branch, on a user account affiliated with multiple sites, go to New Profile module and create a new candidate. You are required to choose a site on the form.
2. Repeat the above step but on a user account affiliated with only one site. Notice that the 'Site' field does not appear and on successful creation of the candidate, the candidate is created for the correct site.
3. On this PR branch, repeat the above steps. With a multiple-site user account, there should be no changes. With a single-site user account, notice that the 'Site' field appears and that the only site option is auto-selected. You should get no errors creating the new candidate.
4. Finally, test a couple of different select elements, both with multiple options and single options, in Loris to ensure that no unexpected behaviours appear. (select elements within module menu filters should not be affected because autoSelect is set to false there)

Link(s) to related issue(s)

• Resolves [new_profile] If user assigned to 1 site, unhide site field and auto-populate default site #5380

[zaliqarosli]

hmm im running into the issue of the form data object not populating with the default option if its automatically selected due to onUserInput never triggering

[maltheism]

@zaliqarosli I got it to work by adding a few changes to the SelectElement component.
I gave the SelectElement a state:

this.state = {
      selected: null,
};

then made this change:

// Add empty option
// If only one option exists and element is required, don't add empty option so that the only available
// option is selected by default
if ((this.props.emptyOption && Object.keys(this.props.options).length != 1)
    || !this.props.required) {
        emptyOptionHTML = <option></option>;
} else if (this.state.selected === null) {
    const selected = this.props.options[
        Object.keys(this.props.options)[0]
    ];
    this.setState({selected: selected});
    this.props.onUserInput(this.props.name, selected, null, 'select');
}

I won't be offended if you go with something different because it isn't the most elegant solution.

[zaliqarosli]

@maltheism hehe thank you ;) i was going the same way but was also unsure about the hackiness of it

[HenriRabalais]

I know @maltheism gave a suggestion above, but I thought I would give my own solution to this issue that I use in the Biobank that doesn't involve giving the selectElement a state.

One of the eventual issues I reached when implementing it is that when there is only 1 value and the empty option is removed, although it appears that the only remaining option is selected, the onUserInput function is never triggered and so therefore the value is never passed to the parent component. I see you've created a workaround in the NewProfileIndex.js to deal with this, but I believe we will run into this issue with other modules and filters when they only have one value. I suggest doing this process in the selectElement itself so that it's taken care of across all modules.

What I did is I created a new prop called autoSelect and set the value to default to true. I then triggered the onUserInput function on component mount and update (in case the number of options changed to 1, in a dynamic form for example) if the options object had a length value of 1.

Let me know what you think!

/**
 * Select Component
 * React wrapper for a simple or 'multiple' <select> element.
 */
class SelectElement extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    const optionsArray = Object.keys(this.props.options);
    if (this.props.autoSelect && optionsArray.length === 1) {
      this.props.onUserInput(this.props.name, optionsArray[0]);
    }
  }

  componentDidUpdate(prevProps) {
    const options = Object.keys(this.props.options);
    const prevOptions = Object.keys(prevProps.options);
    if (options.length !== prevOptions.length ||
        !options.every((v, i) => v === prevOptions[i])) {
      if (this.props.autoSelect && options.length === 1) {
        this.props.onUserInput(this.props.name, options[0]);
      }
    }
  }

[maltheism]

@HenriRabalais I had to comment that your solution is very cool!

[zaliqarosli]

@HenriRabalais that solution looks good to me! the only thing that i would change though is to maybe make the default value false? i noticed when testing this PR that we wouldn't want to auto select the only option on menu filters (we always want to load the page with no filters selected). we would only really want to auto-select on forms where the field is required. we could either add the this.props.required check to the if statements here or make autoSelect an opt-in option. which way do you think we should go?

[HenriRabalais]

@zaliqarosli Ah, yes that's a good point. It would be so nice if we could just default to true! I think opting in could work. Now that I think about it though, since the filter fields are generated by the Filter.js class, the autoSelect prop could be set to false there for all the SelectElements.

e.g.

renderFilterFields() {
    return this.props.fields.reduce((result, field) => {
      const filter = field.filter;
      if (filter && filter.hide !== true) {
        let element;
        switch (filter.type) {
        case 'text':
          element = <TextboxElement key={filter.name}/>;
          break;
        case 'select':
          element = (
            <SelectElement
              key={filter.name}
              options={filter.options}
              sortByValue={filter.sortByValue}
              autoSelect={false}
            />
          );

[zaliqarosli]

@HenriRabalais that's a good option! are all menu filters reactified for sure? edit: i guess it doesn't matter because this change would only affect reactified ones anyways!

[HenriRabalais]

@zaliqarosli Yeah exactly! If they're reactified they should be using the FilterableDatatable.js component.

[zaliqarosli]

@HenriRabalais ready for re-review

[HenriRabalais]

Looks good to me!

[ridz1208]

@HenriRabalais could you test it out as well ?

[zaliqarosli]

@HenriRabalais @driusan ready for re-review!

[ridz1208]

please add content to the CHANGELOG file

changes done