{"action":"created","issue":{"url":"https://api.github.com/repos/salesforce/design-system-react/issues/2339","repository_url":"https://api.github.com/repos/salesforce/design-system-react","labels_url":"https://api.github.com/repos/salesforce/design-system-react/issues/2339/labels{/name}","comments_url":"https://api.github.com/repos/salesforce/design-system-react/issues/2339/comments","events_url":"https://api.github.com/repos/salesforce/design-system-react/issues/2339/events","html_url":"https://github.com/salesforce/design-system-react/issues/2339","id":500403615,"node_id":"MDU6SXNzdWU1MDA0MDM2MTU=","number":2339,"title":"Accordion: Does not trap keyboard events","user":{"login":"interactivellama","id":1290832,"node_id":"MDQ6VXNlcjEyOTA4MzI=","avatar_url":"https://avatars0.githubusercontent.com/u/1290832?v=4","gravatar_id":"","url":"https://api.github.com/users/interactivellama","html_url":"https://github.com/interactivellama","followers_url":"https://api.github.com/users/interactivellama/followers","following_url":"https://api.github.com/users/interactivellama/following{/other_user}","gists_url":"https://api.github.com/users/interactivellama/gists{/gist_id}","starred_url":"https://api.github.com/users/interactivellama/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/interactivellama/subscriptions","organizations_url":"https://api.github.com/users/interactivellama/orgs","repos_url":"https://api.github.com/users/interactivellama/repos","events_url":"https://api.github.com/users/interactivellama/events{/privacy}","received_events_url":"https://api.github.com/users/interactivellama/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-09-30T17:05:53Z","updated_at":"2019-09-30T17:20:14Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"If you render a Combobox into an Accordion panel, and press down to open the menu. The keypress causes the next panel to be focused. This was introduced in #2219"},"comment":{"url":"https://api.github.com/repos/salesforce/design-system-react/issues/comments/536661759","html_url":"https://github.com/salesforce/design-system-react/issues/2339#issuecomment-536661759","issue_url":"https://api.github.com/repos/salesforce/design-system-react/issues/2339","id":536661759,"node_id":"MDEyOklzc3VlQ29tbWVudDUzNjY2MTc1OQ==","user":{"login":"interactivellama","id":1290832,"node_id":"MDQ6VXNlcjEyOTA4MzI=","avatar_url":"https://avatars0.githubusercontent.com/u/1290832?v=4","gravatar_id":"","url":"https://api.github.com/users/interactivellama","html_url":"https://github.com/interactivellama","followers_url":"https://api.github.com/users/interactivellama/followers","following_url":"https://api.github.com/users/interactivellama/following{/other_user}","gists_url":"https://api.github.com/users/interactivellama/gists{/gist_id}","starred_url":"https://api.github.com/users/interactivellama/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/interactivellama/subscriptions","organizations_url":"https://api.github.com/users/interactivellama/orgs","repos_url":"https://api.github.com/users/interactivellama/repos","events_url":"https://api.github.com/users/interactivellama/events{/privacy}","received_events_url":"https://api.github.com/users/interactivellama/received_events","type":"User","site_admin":false},"created_at":"2019-09-30T17:20:14Z","updated_at":"2019-09-30T17:20:14Z","author_association":"CONTRIBUTOR","body":"It looks like the key events are triggered by the correct button.\r\n\r\nI've been unable to duplicate this bug @jlenglain with the following\r\n\r\n```\r\nimport React from 'react';\r\nimport Accordion from '~/components/accordion'; // `~` is replaced with design-system-react at runtime\r\nimport AccordionPanel from '~/components/accordion/panel'; // `~` is replaced with design-system-react at runtime\r\nimport IconSettings from '~/components/icon-settings'; // `~` is replaced with design-system-react at runtime\r\nimport Dropdown from '~/components/menu-dropdown'; // `~` is replaced with design-system-react at runtime\r\n\r\nimport Combobox from '~/components/combobox/__examples__/base'; // `~` is replaced with design-system-react\r\n\r\nclass Example extends React.Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\texpandedPanels: {},\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\tid: '1',\r\n\t\t\t\t\tsummary: 'Accordion Summary',\r\n\t\t\t\t\tdetails: <Combobox />,\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tid: '2',\r\n\t\t\t\t\tsummary: 'Accordion Summary',\r\n\t\t\t\t\tdetails: 'Accordion details - B',\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tid: '3',\r\n\t\t\t\t\tsummary: 'Accordion Summary',\r\n\t\t\t\t\tdetails: 'Accordion details - C',\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t};\r\n\t}\r\n\r\n\tmenuDropdown(selectedItem) {\r\n\t\treturn (\r\n\t\t\t<Dropdown\r\n\t\t\t\talign=\"right\"\r\n\t\t\t\tid={selectedItem.id}\r\n\t\t\t\tassistiveText={{ icon: 'More Options' }}\r\n\t\t\t\tbuttonVariant=\"icon\"\r\n\t\t\t\tbuttonClassName=\"slds-shrink-none\"\r\n\t\t\t\ticonCategory=\"utility\"\r\n\t\t\t\ticonName=\"down\"\r\n\t\t\t\ticonVariant=\"border-filled\"\r\n\t\t\t\tonSelect={(option) => {\r\n\t\t\t\t\tif (option.label === 'delete') {\r\n\t\t\t\t\t\tthis.setState((state) => ({\r\n\t\t\t\t\t\t\t...state,\r\n\t\t\t\t\t\t\titems: state.items.filter((item) => item.id !== selectedItem.id),\r\n\t\t\t\t\t\t}));\r\n\t\t\t\t\t} else if (console) {\r\n\t\t\t\t\t\tconsole.log('onSelect', event, option);\r\n\t\t\t\t\t}\r\n\t\t\t\t}}\r\n\t\t\t\toptions={[\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tlabel: 'delete',\r\n\t\t\t\t\t\tvalue: 'A0',\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tlabel: 'redo',\r\n\t\t\t\t\t\tvalue: 'B0',\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tlabel: 'activate',\r\n\t\t\t\t\t\tvalue: 'C0',\r\n\t\t\t\t\t},\r\n\t\t\t\t]}\r\n\t\t\t\ticonSize=\"x-small\"\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n\r\n\ttogglePanel(event, data) {\r\n\t\tthis.setState((state) => ({\r\n\t\t\t...state,\r\n\t\t\texpandedPanels: {\r\n\t\t\t\t[data.id]: !state.expandedPanels[data.id],\r\n\t\t\t},\r\n\t\t}));\r\n\t\tif (this.props.action) {\r\n\t\t\tconst dataAsArray = Object.keys(data).map((id) => data[id]);\r\n\t\t\tthis.props.action('onClick')(event, ...dataAsArray);\r\n\t\t} else if (console) {\r\n\t\t\tconsole.log('[onSelect] (event, data)', event, data);\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<IconSettings iconPath=\"/assets/icons\">\r\n\t\t\t\t<Accordion id=\"base-example-accordion\">\r\n\t\t\t\t\t{this.state.items.map((item, i) => (\r\n\t\t\t\t\t\t<AccordionPanel\r\n\t\t\t\t\t\t\texpanded={this.state.expandedPanels[item.id]}\r\n\t\t\t\t\t\t\tid={item.id}\r\n\t\t\t\t\t\t\tpanelContentActions={this.menuDropdown(item)}\r\n\t\t\t\t\t\t\tkey={item.id}\r\n\t\t\t\t\t\t\tonTogglePanel={(event) => this.togglePanel(event, item)}\r\n\t\t\t\t\t\t\tsummary={item.summary}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{item.details}\r\n\t\t\t\t\t\t</AccordionPanel>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</Accordion>\r\n\t\t\t</IconSettings>\r\n\t\t);\r\n\t}\r\n}\r\n\r\nExample.displayName = 'AccordionExample';\r\nexport default Example; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime\r\n```"}}
{"actor":{"display_login":"interactivellama"}}