zendeskgarden/react-components

Modal closes when selecting item from Dropdown

richardpur opened this issue · 2 comments

richardpur commented

Expectations

Clicking an AutoComplete dropdown in a Modal should just select the item.

Reality

Creating an AutoComplete dropdown while within a Modal closes the Modal.

Steps to Reproduce

  1. Create a Modal
  2. Create a Dropdown Component (Copied from Zendesk Garden documentation)
  3. Open the Modal and select a Dropdown Item

import React, { useState } from 'react';
import { Button } from '@zendeskgarden/react-buttons';
import { Row, Col } from '@zendeskgarden/react-grid';
import {
Modal,
Header,
Body,
Footer,
FooterItem,
Close
} from '@zendeskgarden/react-modals';
import { Dropdown, Field, Menu, Item, Select, Label } from '@zendeskgarden/react-dropdowns';

const items = [
{label: 'Australia', value: 'Australia'}
]

const Example = () => {
const [visible, setVisible] = useState(false);
const [selectedItem, setSelectedItem] = useState(items[0]);

return (
  <>
    <Row>
      <Col textAlign="center">
        <Button onClick={() => setVisible(true)}>Open modal</Button>
        {visible && (
          <Modal onClose={() => setVisible(false)}>
            <Header>Dropdown Test</Header>
            <Body>
              <Dropdown
                selectedItem={selectedItem}
                onSelect={setSelectedItem}
                downshiftProps={{ itemToString: (item) => item && item.label }}
              >
                <Field>
                  <Label>Houseplant</Label>
                  <Select>{selectedItem.label}</Select>
                </Field>
                <Menu>
                  {items.map(option => (
                    <Item key={option.value} value={option}>
                      {option.label}
                    </Item>
                  ))}
                </Menu>
              </Dropdown>
            </Body>
            <Footer>
              <FooterItem>
                <Button onClick={() => setVisible(false)} isBasic>
                  Cancel
                </Button>
              </FooterItem>
              <FooterItem>
                <Button isPrimary onClick={() => setVisible(false)}>
                  Add plant food
                </Button>
              </FooterItem>
            </Footer>
            <Close aria-label="Close modal" />
          </Modal>
        )}
      </Col>
    </Row>
  </>
);

};

export default Example;

Fine Print

  • Component: ,
  • Version: Latest
  • Browsers: all
richardpur commented

modal_autocomplete

Additional Visual

Apologies for the messy code block..

hzhu commented

Hi @richardpur, thanks for reporting this bug.

A fix for this bug was released in v8.35.0. Specifically, @zendeskgarden/container-modal has been updated with the bug fix (zendeskgarden/react-containers#282).