Simple Dropdown Example

[zakalwe2016]

I have created a simple block to experiment with the Dropdown component as detailed at https://developer.wordpress.org/block-editor/components/dropdown/

My block is defined as follows:

const {
    registerBlockType
} = wp.blocks;

import {
    Dropdown,
    Button
} from '@wordpress/components';

registerBlockType('test/test', {
    title: 'Test',
    description: 'Test Block',
    category: 'layout',
    edit(props) {

        const MyDropdown = () => (
            <Dropdown
                className="my-container-class-name"
                contentClassName="my-popover-content-classname"
                position="top center"
                renderToggle={ ( { isOpen, onToggle } ) => (
                    <Button isPrimary onClick={ onToggle } aria-expanded={ isOpen }>
                        Toggle Popover!
                    </Button>
                ) }
                renderContent={ () => (
                    <div>
                        This is the content of the popover.
                    </div>
                ) }
            />
        );

        return (
            <MyDropdown/>
        );

    },
    save(props) {}
});

The error that results is:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of PopoverDetectOutside which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

I also note that the location of the popover is not aligned to the dropdown, I can see in the rendered html that the containing block is a div so spans the width of the container.

Any help would be greatly appreciated. Still a bit green around the gills when it comes to React and Gutenberg but I'm learning!

[zakalwe2016]

#8468 is possibly related as issue seems extremely similar in nature

[youknowriad]

That's just a React Warning which shouldn't break anything. We removed all those deprecated APIs usage in the last versions but some plugins may still use them which would result in that message.