[BUG] Only IE 11 - Select component (form builder) not rendering options correctly when used with choices.js

[ullas1989]

Environment

Please provide as many details as you can:

• Hosting type
  • [x] Form.io
  • [ ] Local deployment
  • Version:
• Formio.js version: "angular-formio": "^4.6.10"
• Frontend framework: Angular
• Browser: IE 11
• Browser version: 11.1365.17134.0

Steps to Reproduce

1. Open IE 11
2. Go to https://adoring-torvalds-b32d1a.netlify.com/
3. Options in by default not appearing as part of dropdown.

Expected behavior

formio select component should work in IE as it is working in other browsers.

Observed behavior

Example

https://adoring-torvalds-b32d1a.netlify.com/ https://github.com/ullas1989/angular-formio-demo

<div>
  <formio [form]='{
    "components": [
        {
            "label": "Select",
            "widget": "choicesjs",
            "tableView": true,
            "multiple": true,
            "data": {
                "values": [
                    {
                        "label": "opt1",
                        "value": "opt1"
                    },
                    {
                        "label": "opt2",
                        "value": "opt2"
                    },
                    {
                        "label": "opt3",
                        "value": "opt3"
                    },
                    {
                        "label": "opt4",
                        "value": "opt4"
                    }
                ]
            },
            "selectThreshold": 0.3,
            "calculateServer": false,
            "validate": {
                "multiple": true
            },
            "key": "select1",
            "type": "select",
            "indexeddb": {
                "filter": {}
            },
            "input": true
        },
        {
            "type": "button",
            "label": "Submit",
            "key": "submit",
            "disableOnInvalid": true,
            "input": true,
            "tableView": false
        }
    ]
}'></formio>
</div>

[wag110894]

@ullas1989 You will need to change the Widget Type from Choices.js to HTML 5 if you are using IE11.

[ullas1989]

@wag110894 Problem is then multi-select doesn't work with html5 dropdown option. All options just showing as part of text box and not able to select multiple option. See b elow.

[ullas1989]

@wag110894 It is a patch but I was able to write custom logic inside select form-io component do something like this for IE.

Open to better approach if available.

`var ele1 = document.getElementsByClassName("choices form-group formio-choices");

if(ele1 && ele1.length > 0) { var ele2 = ele1[0].lastElementChild; if(ele2) { ele2.classList.add("choices__list--dropdown");
} }`

[travist]

@ullas1989 where is this code that you changed? Was this done in the choices.js library? If so, then we just need to create a pull request to that library.

[ullas1989]

@travist This is a custom script that was added inside form-io select component, so not really a code change, just a work around.

I can provide schema json if anyone need that.

[Sidiro23]

We're currently addressing a backlog of GitHub issues, and as part of this effort, some inactive issues may be marked as closed. This isn't a dismissal, but a step toward more efficient tracking.

If you feel the issue is still relevant, please re-open and we'll ensure it gets the attention it deserves. Your understanding is appreciated as we work to enhance our open-source responsiveness.