Widget Type- ChoicesJs

[Mathew77]

Hi, When I select choicesjs on the widget type for the select dropdown that i place inside Data Grid the options are not displaying. Please how can I fix this. Thanks.

[wag110894]

Can you provide the form embed?

[Mathew77]

Hi, Thanks for reaching out. Please find attached images.

On Mon, Aug 16, 2021 at 2:52 PM Will Gay @.***> wrote:

Can you provide the form embed?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/formio/react/issues/406#issuecomment-899528539, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB4OPVWOUFQEIY7YGNU2PH3T5EJYRANCNFSM5CG3F27Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

[wag110894]

Hello @Mathew77, I am not seeing any attached images. Can you resend them?

[Mathew77]

Hi, Please see attached images.

Thanks.[image: Data Grid.JPG] [image: wdiget type.JPG]

On Mon, Aug 16, 2021 at 7:18 PM Will Gay @.***> wrote:

Hello @Mathew77 https://github.com/Mathew77, I am not seeing any attached images. Can you resend them?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/formio/react/issues/406#issuecomment-899719694, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB4OPVR5TKU2TPHVULF7D3TT5FI7LANCNFSM5CG3F27Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

[wag110894]

Can you retry and add them onto github itself?

[Mathew77]

@wag110894 If I select the ChoicesJs as the option of the widget type the dropdown list will be empty and is inside a Data Grid.

Thanks.

[wag110894]

Can you provide the JSON?

[Mathew77]

{ "resourceObject": null, "display": "", "components": [ { "label": "HouseHold", "labelPosition": "top", "description": "", "tooltip": "", "disableAddingRemovingRows": false, "conditionalAddButton": "", "reorder": false, "addAnother": "", "addAnotherPosition": "top", "defaultOpen": false, "layoutFixed": true, "enableRowGroups": false, "initEmpty": false, "customClass": "", "tabindex": "", "hidden": false, "hideLabel": false, "autofocus": false, "disabled": false, "tableView": false, "modalEdit": false, "defaultValue": [ { "date": "", "domain": {}, "service": "" } ], "persistent": true, "protected": false, "dbIndex": false, "encrypted": false, "redrawOn": "", "clearOnHide": true, "customDefaultValue": "", "calculateValue": "", "calculateServer": false, "allowCalculateOverride": false, "validateOn": "change", "validate": { "required": false, "minLength": "", "maxLength": "", "customMessage": "", "custom": "", "customPrivate": false, "json": "", "strictDateValidation": false, "multiple": false, "unique": false }, "unique": false, "errorLabel": "", "key": "dataGrid", "tags": [], "properties": {}, "conditional": { "show": null, "when": null, "eq": "", "json": "" }, "customConditional": "", "logic": [], "attributes": {}, "overlay": { "style": "", "page": "", "left": "", "top": "", "width": "", "height": "" }, "type": "datagrid", "input": true, "components": [ { "label": "Date", "labelPosition": "top", "displayInTimezone": "viewer", "useLocaleSettings": false, "allowInput": false, "format": "yyyy-MM-dd hh:mm a", "placeholder": "", "description": "", "tooltip": "", "customClass": "", "tabindex": "", "hidden": false, "hideLabel": false, "autofocus": false, "dataGridLabel": false, "disabled": false, "tableView": false, "modalEdit": false, "shortcutButtons": [], "enableDate": true, "enableMinDateInput": false, "datePicker": { "minDate": null, "maxDate": null, "disable": "", "disableFunction": "", "disableWeekends": false, "disableWeekdays": false, "showWeeks": true, "startingDay": 0, "initDate": "", "minMode": "day", "maxMode": "year", "yearRows": 4, "yearColumns": 5 }, "enableMaxDateInput": false, "enableTime": true, "timePicker": { "showMeridian": true, "hourStep": 1, "minuteStep": 1, "readonlyInput": false, "mousewheel": true, "arrowkeys": true }, "multiple": false, "defaultValue": "", "defaultDate": "", "customOptions": {}, "persistent": true, "protected": false, "dbIndex": false, "encrypted": false, "redrawOn": "", "clearOnHide": true, "customDefaultValue": "", "calculateValue": "", "calculateServer": false, "allowCalculateOverride": false, "validate": { "required": false, "customMessage": "", "custom": "", "customPrivate": false, "json": "", "strictDateValidation": false, "multiple": false, "unique": false }, "unique": false, "validateOn": "change", "errorLabel": "", "key": "date", "tags": [], "properties": {}, "conditional": { "show": null, "when": null, "eq": "", "json": "" }, "customConditional": "", "logic": [], "attributes": {}, "overlay": { "style": "", "page": "", "left": "", "top": "", "width": "", "height": "" }, "type": "datetime", "timezone": "", "input": true, "widget": { "type": "calendar", "displayInTimezone": "viewer", "locale": "en", "useLocaleSettings": false, "allowInput": false, "mode": "single", "enableTime": true, "noCalendar": false, "format": "yyyy-MM-dd hh:mm a", "hourIncrement": 1, "minuteIncrement": 1, "time_24hr": false, "minDate": null, "disabledDates": "", "disableWeekends": false, "disableWeekdays": false, "disableFunction": "", "maxDate": null }, "prefix": "", "suffix": "", "refreshOn": "", "showCharCount": false, "showWordCount": false, "allowMultipleMasks": false, "datepickerMode": "day", "id": "esjecf000000" }, { "label": "Domain", "labelPosition": "top", "widget": "choicesjs", "placeholder": "", "description": "", "tooltip": "", "customClass": "", "tabindex": "", "hidden": false, "hideLabel": false, "uniqueOptions": false, "autofocus": false, "dataGridLabel": false, "disabled": false, "tableView": true, "modalEdit": false, "multiple": false, "dataSrc": "url", "data": { "resource": "", "json": "", "url": "{{submission.data.baseUrl}}domains", "headers": [ { "key": "", "value": "" } ], "custom": "", "values": [ { "label": "", "value": "" } ] }, "dataType": "", "idPath": "id", "valueProperty": "", "template": "{{ item.name }}", "refreshOn": "", "refreshOnBlur": "", "clearOnRefresh": false, "searchEnabled": true, "selectThreshold": 0.3, "readOnlyValue": false, "customOptions": {}, "useExactSearch": false, "persistent": true, "protected": false, "dbIndex": false, "encrypted": false, "clearOnHide": true, "customDefaultValue": "", "calculateValue": "", "calculateServer": false, "allowCalculateOverride": false, "validateOn": "change", "validate": { "required": false, "customMessage": "", "custom": "", "customPrivate": false, "json": "", "strictDateValidation": false, "multiple": false, "unique": false, "onlyAvailableItems": false }, "unique": false, "errorLabel": "", "key": "domain", "tags": [], "properties": {}, "conditional": { "show": null, "when": null, "eq": "", "json": "" }, "customConditional": "", "logic": [], "attributes": {}, "overlay": { "style": "", "page": "", "left": "", "top": "", "width": "", "height": "" }, "type": "select", "indexeddb": { "filter": {} }, "selectFields": "", "searchField": "", "minSearch": 0, "filter": "", "limit": 100, "redrawOn": "", "input": true, "disableLimit": false, "searchThreshold": 0.3, "prefix": "", "suffix": "", "showCharCount": false, "showWordCount": false, "allowMultipleMasks": false, "lazyLoad": true, "authenticate": false, "ignoreCache": false, "fuseOptions": { "include": "score", "threshold": 0.3 }, "id": "e9qs6cv000", "selectValues": "", "sort": "", "defaultValue": {} }, { "label": "Service", "labelPosition": "top", "widget": "html5", "placeholder": "", "description": "", "tooltip": "", "customClass": "", "tabindex": "", "hidden": false, "hideLabel": false, "uniqueOptions": false, "autofocus": false, "dataGridLabel": false, "disabled": false, "tableView": true, "modalEdit": false, "multiple": false, "dataSrc": "url", "data": { "values": [ { "label": "", "value": "" } ], "resource": "", "json": "", "url": "{{submission.data.baseUrl}}domains/{{row.domain.id}}/ovcServices", "headers": [ { "key": "", "value": "" } ], "custom": "" }, "dataType": "", "idPath": "id", "valueProperty": "", "template": "{{ item.name }}", "refreshOn": "dataGrid.domain", "refreshOnBlur": "", "clearOnRefresh": false, "searchEnabled": true, "selectThreshold": 0.3, "readOnlyValue": false, "customOptions": {}, "useExactSearch": false, "persistent": true, "protected": false, "dbIndex": false, "encrypted": false, "clearOnHide": true, "customDefaultValue": "", "calculateValue": "", "calculateServer": false, "allowCalculateOverride": false, "validateOn": "change", "validate": { "required": false, "onlyAvailableItems": false, "customMessage": "", "custom": "", "customPrivate": false, "json": "", "strictDateValidation": false, "multiple": false, "unique": false }, "unique": false, "errorLabel": "", "key": "service", "tags": [], "properties": {}, "conditional": { "show": null, "when": null, "eq": "", "json": "" }, "customConditional": "", "logic": [], "attributes": {}, "overlay": { "style": "", "page": "", "left": "", "top": "", "width": "", "height": "" }, "type": "select", "indexeddb": { "filter": {} }, "selectFields": "", "searchField": "", "minSearch": 0, "filter": "", "limit": 100, "redrawOn": "", "input": true, "disableLimit": false, "prefix": "", "suffix": "", "showCharCount": false, "showWordCount": false, "allowMultipleMasks": false, "lazyLoad": true, "authenticate": false, "ignoreCache": false, "searchThreshold": 0.3, "fuseOptions": { "include": "score", "threshold": 0.3 }, "id": "e873eg9000000000000000000000000", "defaultValue": {}, "selectValues": "", "sort": "" } ], "dataGridLabel": false, "placeholder": "", "prefix": "", "suffix": "", "multiple": false, "refreshOn": "", "widget": null, "showCharCount": false, "showWordCount": false, "allowMultipleMasks": false, "tree": true, "id": "eu8rn3e" }, { "type": "button", "label": "Submit", "key": "submit", "size": "md", "block": false, "action": "submit", "disableOnInvalid": true, "theme": "primary", "input": true, "placeholder": "", "prefix": "", "customClass": "", "suffix": "", "multiple": false, "defaultValue": null, "protected": false, "unique": false, "persistent": false, "hidden": false, "clearOnHide": true, "refreshOn": "", "redrawOn": "", "tableView": false, "modalEdit": false, "dataGridLabel": true, "labelPosition": "top", "description": "", "errorLabel": "", "tooltip": "", "hideLabel": false, "tabindex": "", "disabled": false, "autofocus": false, "dbIndex": false, "customDefaultValue": "", "calculateValue": "", "calculateServer": false, "widget": { "type": "input" }, "attributes": {}, "validateOn": "change", "validate": { "required": false, "custom": "", "customPrivate": false, "strictDateValidation": false, "multiple": false, "unique": false }, "conditional": { "show": null, "when": null, "eq": "" }, "overlay": { "style": "", "left": "", "top": "", "width": "", "height": "" }, "allowCalculateOverride": false, "encrypted": false, "showCharCount": false, "showWordCount": false, "properties": {}, "allowMultipleMasks": false, "leftIcon": "", "rightIcon": "", "id": "efrgvwc" } ] }

[Azmaa22]

when i use choicesJs as widget type, it's displayed like that "first select component" how to fix it?

[daneformio]

@Azmaa22 Can you provide a JSFiddle example reproducing your issue?

[lane-formio]

Thank you for your contribution. As this issue has been inactive for over 90 days, I will close it for now. If you wish to reopen the issue, please respond and we can resume the triage process.