fix: escape behavior of popup and dropdown

[kuzhelov]

Fixes #1079 .

The issue was caused by the fact that Esc key event was propagated further in the components tree, even being processed by Popup/Dropdown. Necessary instructions to prevent propagation were added to the code.

[codecov]

Codecov Report

Merging #1183 into master will decrease coverage by <.01%.
The diff coverage is 60%.

@@            Coverage Diff             @@
##           master    #1183      +/-   ##
==========================================
- Coverage   82.46%   82.45%   -0.01%     
==========================================
  Files         735      735              
  Lines        8723     8726       +3     
  Branches     1169     1169              
==========================================
+ Hits         7193     7195       +2     
- Misses       1514     1515       +1     
  Partials       16       16

Impacted Files	Coverage Δ
...ackages/react/src/components/Dropdown/Dropdown.tsx	61.12% <0%> (-0.17%)	⬇️
packages/react/src/components/Popup/Popup.tsx	75.8% <75%> (+0.26%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3905d6f...ddf2bae. Read the comment docs.

[silviuaavram]

I tested in the docsite with selection and search PRs. Esc looks fixed, although I am not sure why the popup closes when you click on the search input text. or when you Tab into it and then hit Enter.

This happens in this PR, I tried to repro in that sandbox from the issue and it was ok there.

Used the code below in the Inline example in the Docsite.

import React from 'react'
import { Button, Dropdown, Popup } from '@stardust-ui/react'

const inputItems = [
  'Bruce Wayne',
  'Natasha Romanoff',
  'Steven Strange',
  'Alfred Pennyworth',
  `Scarlett O'Hara`,
  'Imperator Furiosa',
  'Bruce Banner',
  'Peter Parker',
  'Selina Kyle',
]

const PopupExampleInline = () => (
  <Popup
    trigger={<Button icon="expand" />}
    content={
      <>
      <Dropdown
        items={inputItems}
        placeholder="Start typing a name"
        noResultsMessage="We couldn't find any matches."
        getA11ySelectionMessage={{
          onAdd: item => `${item} has been selected.`,
        }}
      />
      <Dropdown
        search
        items={inputItems}
        placeholder="Start typing a name"
        noResultsMessage="We couldn't find any matches."
        getA11ySelectionMessage={{
          onAdd: item => `${item} has been selected.`,
        }}
      />
      </>
    }
    inline
  />
)

export default PopupExampleInline

[sophieH29]

why is it needed to stop propagation in the popup? As far as understood, the problem was caused in Dropdown which was propagating keyboard event to Popup. Seems like Dropdown changes should fix it, isn't it?

[sophieH29]

I believe Dropdown in Popup will be usually used with focus trap behavior. This PR #1180 stop propagation for any keyboard events within FocusTrapZone

[kuzhelov]

@sophieH29 why is it needed to stop propagation in the popup? As far as understood, the problem was caused in Dropdown which was propagating keyboard event to Popup

Actually, this makes just one aspect of the problem, the one that is replicated with the codesandbox example in the issue description: #1079 . If it would be the only problem, than yes, changes to the Dropdown would be enough.

However, as it is mentioned in the issue, the same problem applies to Popup -> Popup case, and this behavior is not correct (from issue's description):

The same result will be for multiple Popups.

---

@sophieH29 I believe Dropdown in Popup will be usually used with focus trap behavior. This PR #1180 stop propagation for any keyboard events within FocusTrapZone

Yes, it should - however, in the meanwhile this fix is necessary