javascript – Custom block SelectControl works but equivalent ComboboxControl gives errors – where’s my mistake?

Question

I have a SelectControl in a custom block, to set a meta field. It works, but would be better if it were a ComboboxControl, as the list of options is likely to grow, but I get errors when I switch it over to a Combobox – leaving all other settings the same. This is currently running on localhost, using WAMP.

Here’s the definition:

                <ComboboxControl
                    label="Speaker"
                    options={speakeropts()}
                    help='Choose from list - new speakers need to be added to the list by an administrator'
                    value={ speakerValue }
                    onChange={ updateSpeakerValue }
                />

and the setup

        const speakerlist=wp.data.select('core').getEntityRecords('taxonomy', 'speakers',{order_by: 'name', per_page: 100});
        function speakeropts(){
            var options=[]; 
            options.push({value:'0', label:''}); // first entry on list is blank
        
            if (speakerlist) {
                speakerlist.forEach((sp) => { // simple foreach loop
                    options.push({value:sp.id, label:sp.name});
                });
            }
            return options;
        }
        const speakerValue = meta['ach-td-speaker'];
        function updateSpeakerValue( newValue ) {
            setMeta( { ...meta, 'ach-td-speaker': newValue } );
        };

There are two issues.

  1. Clicking in the box (setting focus) gives and error in Chrome’s console window
react-dom.min.js?ver=16.13.1:32 Uncaught TypeError: p is not a function
    at onFocus (components.min.js?ver=863b0e64189bf5cd6b5aced6797bc2d6:7)
    at Object.ki (react-dom.min.js?ver=16.13.1:176)
    at ji (react-dom.min.js?ver=16.13.1:13)
    at mi (react-dom.min.js?ver=16.13.1:13)
    at lf (react-dom.min.js?ver=16.13.1:13)
    at wi (react-dom.min.js?ver=16.13.1:187)
    at Kd (react-dom.min.js?ver=16.13.1:32)
    at pc (react-dom.min.js?ver=16.13.1:32)
    at Wf (react-dom.min.js?ver=16.13.1:34)
    at react-dom.min.js?ver=16.13.1:236

and then when I save the post (selecting an item gives no problems, and calls the ‘onChange’ function) I get another javascript error

POST http://localhost/wp-json/wp/v2/talks/34?_locale=user 400 (Bad Request)

and also an error message on the WordPress Admin screen

Updating failed. meta.ach-td-speaker is not of type string.

The latter message makes no sense to me, as it certainly is of type string

        register_post_meta( 'talks', 'ach-td-speaker', array(
            'show_in_rest' => true,
            'single' => true,
            'type' => 'string',
        ) );

I’m assuming that the problem is something I’ve done that works differently if the control is a Combobox rather than a Select, but I can’t imagine what it might be – the documentation of the parameters seems identical. Although I’ve 50 years of prgramming experience, I’m still new to Javascript so there could easily be things I’ve missed. Has anyone any thoughts, or suggestions what to try next?

0
Jeremy Skelton 4 months 2021-03-21T11:36:50-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse