Autocomplete: Handle dynamic options

[ElishaSamPeterPrabhu]

Description

• Added a prop filterOptions to accept values dynamically

References
Fixes #2710

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How Has This Been Tested?

• Used timeout to simulate API calls
• Random filter logic in consumer side

<!-- Test components -->
<modus-autocomplete
  label="Default Autocomplete"
  show-no-results-found-message="true"
  placeholder="Search..."></modus-autocomplete>

<script>
  const modusAutocomplete = document.querySelector('modus-autocomplete');
  const options = [
    { id: '0', value: 'Apple' },
    { id: '1', value: 'Banana' },
    { id: '2', value: 'Orange' },
    { id: '3', value: 'Mango' },
    { id: '4', value: 'Pineapple' },
    { id: '5', value: 'Grapes' },
    { id: '6', value: 'Watermelon' },
    { id: '7', value: 'Strawberry' },
    { id: '8', value: 'Blueberry' },
    { id: '9', value: 'Raspberry' },
    { id: '10', value: 'Blackberry' },
    { id: '11', value: 'Cherry' },
    { id: '12', value: 'Peach' },
    { id: '13', value: 'Pear' },
    { id: '14', value: 'Plum' },
    { id: '15', value: 'Kiwi' },
    { id: '16', value: 'Lemon' },
    { id: '17', value: 'Lime' },
    { id: '18', value: 'Papaya' },
    { id: '19', value: 'Passion Fruit' },
  ];
  function getFilteredOptions(value) {
    modusAutocomplete.loading= true;
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(options.filter((option) => option.value.includes(value)));
        modusAutocomplete.loading = false;
      }, 3000);
    });
  }
  modusAutocomplete.options = options;
  modusAutocomplete.filterOptions = getFilteredOptions;
</script>

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[netlify]

✅ Deploy Preview for moduswebcomponents ready!

Name	Link
🔨 Latest commit	5942ad8
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/66d06c42cf8bdb0008ed4804
😎 Deploy Preview	https://deploy-preview-2723--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 26 (🟢 up 2 from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cjwinsor]

My main feedback here is whether we can handle without adding a new prop, but instead allow options to also be the promise. Not sure if this would require rethinking anything though. I'd just want to say autocomplete.options = getOptions; where getOptions returns a promise when executed.

@prashanth-offcl

[prashanth-offcl]

My main feedback here is whether we can handle without adding a new prop, but instead allow options to also be the promise. Not sure if this would require rethinking anything though. I'd just want to say autocomplete.options = getOptions; where getOptions returns a promise when executed.

@prashanth-offcl

Thanks @cjwinsor I'm thinking if we can introduce two new props loading and filterOptions that accepts an async function.

onValueChange if filterOptions prop is defined, then we will skip the filtering and call the method to get the filtered options from the integrator and display it. This will be useful for both dynamic options and custom filtering in static options if required. The integrator can use the loading prop to display the spinner while they fetch the data from server. The integrator will be responsible to reject promises in case of multiple calls to the filterOptions and ensure they resolve the most recent one.

[prashanth-offcl]

Waiting for Sam to try the discussed approach

[prashanth-offcl]

@ElishaSamPeterPrabhu some suggestions

• The results in the list should be hidden when the loading prop is set to true
• Rename isLoading to loading, and getFilteredOptions to filterOptions
• The same behavior for customOptions is not handled.
• When changing the loading prop to true after resolving the promise, the no results found message is displayed before showing the filtered list.
• The PR also seems to be contain code that needs to be cleaned up
• Update documentation for filterOptions and loading prop

[prashanth-offcl]

BTW I managed to test the updates in react test application using yalc and it works fine.

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu some suggestions

• The results in the list should be hidden when the loading prop is set to true
• Rename isLoading to loading, and getFilteredOptions to filterOptions
• The same behavior for customOptions is not handled.
• When changing the loading prop to true after resolving the promise, the no results found message is displayed before showing the filtered list.
• The PR also seems to be contain code that needs to be cleaned up
• Update documentation for filterOptions and loading prop

All comments are addressed except custom options implementation and ''m not able to reproduce this
"When changing the loading prop to true after resolving the promise, the no results found message is displayed before showing the filtered list."

For custom options implementation are are we going to get the values and format separately or like in li format like
`

<li data-search-value="The Git Guru" data-id="1" style="padding: 8px">
  <div style="font-weight: bold">The Git Guru</div>
  <div style="font-size: 12px">Lead DevOps Engineer</div>
</li>
<li data-search-value="Bob the Builder" data-id="2" style="padding: 8px">
  <div style="font-weight: bold">Bob the Builder</div>
  <div style="font-size: 12px">Senior Construction Engineer</div>
</li>

`