formio
Select component with data source URL - no error handling when URL not reachable or authorized
Describe the bug I am using the select component with data source URL.
When the URL is not reachable, does not exist, or is not authorized, the select box remains empty with no error handling informing the user that something is wrong.
Version/Branch Multiple, including the default version currently on sandbox
Have not found a version where an error message was shown.
To Reproduce Steps to reproduce the behavior:
- As an example use HERE.com api, could be any other source I presume.
- Create an account, create app and api key.
- Replace
<YOUR_HERE_API_KEY>in the form definition json below with your HERE api key.
{
"display": "form",
"components": [
{
"label": "Select",
"widget": "choicesjs",
"placeholder": "Type to search (1s delay in this demo)",
"tableView": true,
"dataSrc": "url",
"data": {
"url": "https://autocompletes.search.hereapi.com/v1/autocomplete",
"headers": [
{
"key": "",
"value": ""
}
]
},
"valueProperty": "id",
"template": "<span>{{ item.title }}</span>",
"validate": {
"select": false
},
"validateWhenHidden": false,
"key": "select",
"type": "select",
"selectValues": "items",
"disableLimit": false,
"searchField": "q",
"searchDebounce": 1,
"filter": "apiKey=<YOUR_HERE_API_KEY>",
"limit": 5,
"noRefreshOnScroll": false,
"input": true
}
]
}
- Paste the above json in Form JSON on sandbox
- Start typing in the select box - it should be behaving nicely and provide options while you type.
- Corrupt the api key and/or url, start typing again.
- In the browser network traffic (dev tools) you'll see that the url is being queried but trows a 401.
- The select component will behave eerily silent - no error handling - no message to the user.
Expected behavior Show error in the component that the data source is not reachable.
It seems that there is a function handleLoadingError() in the select component that should put an error below the component but in my case at least it is not working.
Screenshots N/A
Additional context N/A
It seems that there should be a componentError event emitted.
Is there a way this could be picked up to display an error? Preferably on the component itself but other wise the ability to issue an alert would already be a way to inform the user.
I'll get this in front of planning to see if we would resource this, but it will likely end up as a lower priority item. But if anyone would like to submit a PR to address this I'd be more than happy to get it reviewed.
My impression is that it is mostly done and that the lack of error display in the UI might have been an oversight at the time of implementation. I dug into it and would need hints to how to take it from what has been reported above.
