DT-Multi-Select-Typeahead

[netlify[bot]]

✅ Deploy Preview for jade-chebakia-17493f ready!

Name	Link
🔨 Latest commit	8e4bc62d2db109e9a44e38b10ed51b6c443734b0
🔍 Latest deploy log	https://app.netlify.com/sites/jade-chebakia-17493f/deploys/6495bdd20bbea40008715dde
😎 Deploy Preview	https://deploy-preview-65--jade-chebakia-17493f.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[cairocoder01]

@kodinkat, what is the intention for this component? The multi-select is already essentially a typeahead, so I'm not sure why another component is being made with the name typeahead in it.

[kodinkat]

@kodinkat, what is the intention for this component? The multi-select is already essentially a typeahead, so I'm not sure why another component is being made with the name typeahead in it.

@cairocoder01 I'll most likely discard this PR, as just trying to familiarise myself with the technology. I'll DM re specifics, as wondering how best to hook directly into dt-multi-select's keyup events, to dynamically refresh options property?

[cairocoder01]

@kodinkat So the multi-select is built to match the static multi-select fields in D.T that always have a static list of options configured in the backend. The dt-tags field implements the onload parameter (or load event listener) that is able to dynamically inject options into the component. I see that it isn't documented well, so here's some details, using the Storybook stories as pseudo documentation.

See https://github.com/DiscipleTools/disciple-tools-web-components/blob/176f19517d671c0bfed89a29f1472033926d006b/src/components/form/dt-tags/dt-tags.stories.js#L171-L191 for a javascript function that listens for a load event from the component. It receives an Event object with a details property containing field (the name attribute from the component), query (the current value in the field that the user has typed), onSuccess (an event to call when this callback is successful), and onError (an event to call when this callback is unsuccessful).

In order to attach that function to the component's event, you can either use the onload attribute, or attach via javascript:

<dt-tags name="myfield" onload="onLoad" ... />

<script>
function onLoad(event) {
    ...
}
document.querySelector('[name="myfield"]').addEventListener('load', onLoad);
</script>

[kodinkat]

@kodinkat So the multi-select is built to match the static multi-select fields in D.T that always have a static list of options configured in the backend. The dt-tags field implements the onload parameter (or load event listener) that is able to dynamically inject options into the component. I see that it isn't documented well, so here's some details, using the Storybook stories as pseudo documentation.

See

https://github.com/DiscipleTools/disciple-tools-web-components/blob/176f19517d671c0bfed89a29f1472033926d006b/src/components/form/dt-tags/dt-tags.stories.js#L171-L191

for a javascript function that listens for a load event from the component. It receives an Event object with a details property containing field (the name attribute from the component), query (the current value in the field that the user has typed), onSuccess (an event to call when this callback is successful), and onError (an event to call when this callback is unsuccessful). In order to attach that function to the component's event, you can either use the onload attribute, or attach via javascript:

<dt-tags name="myfield" onload="onLoad" ... />

<script>
function onLoad(event) {
    ...
}
document.querySelector('[name="myfield"]').addEventListener('load', onLoad);
</script>

Thanks for this @cairocoder01 - I'll try out and will shout if I get stuck!