Gutenberg Block Editor Specifies Incorrect ID on Label

[gsexton]

Overview

I noticed that on the edit page, when editing a page that has my block embedded, clicking on the label for a block control did not check/uncheck the associated checkbox.

The control is defined as:

el(
    wp.components.CheckboxControl,
    {
        id: 'cd-rcalendar-wrap', 
        checked: props.attributes.wrap_events,
        label: i18n.__('COM_CONNECTDAILY_WRAPTITLES',CDaily.CAPTION_BUNDLE),
        onChange: function( value ){ setAttributes({wrap_events: value});}
    }
)

The rendered HTML code is:

<span class="components-checkbox-control__input-container">
<input id="cd-rcalendar-wrap" class="components-checkbox-control__input" type="checkbox" value="1">
</span>
<label class="components-checkbox-control__label" for="inspector-checkbox-control-5">Wrap Event Titles</label>

You can see the for clause of the label is not the id specified in the control definition.

[Mamaduka]

Hello, @gsexton

The Block Editor components are developed in the Gutenberg repo. Do you mind submitting the report there?

Repository URL: ​https://github.com/WordPress/gutenberg/issues/new/choose

Thank you!

[Mamaduka]

The issue was reported upstream - ​https://github.com/WordPress/gutenberg/issues/49852.