Clay: ClayRadio and ClayCheckbox onChange action is closing ClayDropDown's menu

[gabrielpramos]

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

In this situation, we have chosen these components instead of the others to have a low level composition in a way to build our dropdown sections and manage the dropdown active and other props on our filter component more clearly, when we use it on IE11 the dropdown closes when we select a checkbox or a radio button

What are the steps to reproduce?

Create a ClayRadio or ClayCheckbox Within a ClayDropDown then go to IE11 browser and try to select an item:

const createItem = (size) => {
        const item = [];

        for (let i = 0; i < size; i++) {
            item.push({checked: false, label: `item${i}`, value: i});
        }

        return item;
    };

    const [items, setItems] = useState(createItem(5));

    const onChange = (index) => {
        setItems([
            ...items.map((item, indexItem) => ({
                ...item,
                checked: index === indexItem,
            })),
        ]);
    };

return (
                      <ClayDropDown
                active={active}
                onActiveChange={setActive}
                trigger={<ClayButton>Click Here</ClayButton>}
            >
                <ClayDropDown.ItemList>
                    <ClayDropDown.Group header={'Radio'}>
                        <ClayDropDown.ItemList>
                            {items.map(({checked, label, value}, index) => (
                                <ClayDropDown.Section key={index}>
                                    <ClayRadio
                                        checked={checked}
                                        label={label}
                                        onChange={(event) => {                                          
                                            onChange(index);
                                        }}
                                        value={value}
                                    />
                                </ClayDropDown.Section>
                            ))}
                        </ClayDropDown.ItemList>
                    </ClayDropDown.Group>
                </ClayDropDown.ItemList>
            </ClayDropDown>);

What is the expected result?

The DropDown menu will close after the selection.

Environment

windows > IE11

| Tech | Version |
| ----- | ------- |
| Clay | dropdown: v3.4.3; form: v3.8.0; |
| React | 16.12.0 |

[bryceosterhaus]

@gabrielpramos

I am a little confused at the title vs your description.

So are you expecting that the drop down would close after selection of a checkbox or radio? Your title seems to indicate that it is closing, but you don't expect it to.

[bryceosterhaus]

@gabrielpramos checkout this demo and disable closing by removing line 27.

[jbalsas]

Hey @bryceosterhaus, I think the Expected Result here is backwards. The title states that the menu closes in IE11, so the expectation is that it shouldn't.

See It's not possible to select a Filter or Order for the Apps list on IE11 for the same issue DXP-side

[gabrielpramos]

Hey @bryceosterhaus and @jbalsas! Chema is right, the example I have given has no setActive and it is closing the menu only on IE11 as I have looked into.

[bryceosterhaus]

Okay so I think this got fixed via https://github.com/liferay/clay/pull/3335.

It looks like there was a race condition on IE that triggered the element to be mid-alignment or something like that when the item was clicked. This resulted in the focus manager to think that the user was clicking on an element outside of the menu, which causes the menu to no longer display.

I tested it locally and it seems to work fine now. Can you also check it out just to be sure this fixes your issue?

[bryceosterhaus]

You can either use this sandbox https://codesandbox.io/s/clever-dream-1e3bu

Or just check out the latest storybook at https://next.storybook.clayui.com