Bible version SelectControl doesn't have optgroups

[JohnRDOrazio]

In all other BibleGet implementations (Google Docs, Microsoft Word, OpenOffice, LibreOffice ...) the Bible version multiselect is organized by language using optgroups.

However, the select component in the WordPress Customizer did not allow for optgroups. An issue for this was raised in the WordPress Core trac: https://core.trac.wordpress.org/ticket/47692 . And a patch was submitted on the WordPress repo : https://github.com/WordPress/wordpress-develop/pull/430 .

Also the Gutenberg SelectControl component does not allow for optgroups. An issue for this was raised in the Gutenberg development repository: https://github.com/WordPress/gutenberg/issues/26505 . And a provisional patch was submitted : https://github.com/JohnRDOrazio/gutenberg/pull/4/files .

However it's hard to tell if and when the submitted patches will be accepted and integrated into the codebase. Until that happens, perhaps alternative components should be created which allow for optgroups.

[stokesman]

I found my way here from the Gutenberg repo. Just wanted to suggest that maybe instead of (or while) waiting on that improved SelectControl component from there, you could create the component you need without much code (or build steps).

I made an example of doing so that you can see here: https://codesandbox.io/s/createelement-select-es5-ukllr?file=/src/index.js It's written to use createElement and ES5 so you could drop the three functions Select, OptionGroup, Option into the gutenberg.js here and it should work to use like so:

createElement( Select, {
    className: 'bibleVersionSelect',
    value: attributes.VERSION,
    onChange: changeVersion,
    multiple: true,
    options: bibleVersionsSelectOptions,
})

Only I didn't put in support for the value prop so that's something you'd probably need to add but it shouldn't be too tricky. Besides that, it doesn't support the label and help props that SelectControl does but adding those or just creating them around the component as separate elements wouldn't be difficult.

And after all that I finally see:

Until that happens, perhaps alternative components should be created which allow for optgroups.

So yeah, I think that's a good idea.

[JohnRDOrazio]

Thanks so much @stokesman ! I look into this kind of implementation.

[JohnRDOrazio]

Fixed in PR #11 thanks to input from @stokesman

[JohnRDOrazio]

@stokesman the component seems to be working fine, however I notice that when I refresh the page that I'm editing, if it has a block with this custom OptGroupControl, I see this error popup in the console after the page is refreshed:

react_devtools_backend.js:2430 Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Do you know what could be causing this?

The code, based mostly on your example, is here: https://github.com/BibleGet-I-O/bibleget-wordpress/blob/da254c75347da1ad8c53ef542375e9f4e717ec79/js/gutenberg.js#L48-L102

[stokesman]

@JohnRDOrazio, glad to see you got this going! I like that you thought to wrap it with BaseControl 👍

I just cloned this repo and installed it in my local WP 5.6.2 and have not been able to reproduce the issue. I tried with the built-in version of Gutenberg and a recent build of the plugin. Are you certain it is coming from your plugin? I know there was something in recent versions of Gutenberg that caused the same type of error upon page load but I can't remember what it was coming from specifically.