wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-23 08:48:01 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

UBER-634: focus on SelectPopup (#3897)

Browse Source 
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
This commit is contained in:
Kristina 2023-10-26 19:37:45 +04:00 committed by GitHub
parent e3f5ed4860
commit 16d3ef147a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,6 +2,7 @@
lib/ lib/
_api-extractor-temp/ _api-extractor-temp/
temp/ temp/
.idea
# Logs # Logs
*.log *.log

4
packages/theme/styles/popups.scss
View File

@ -23,6 +23,10 @@
max-width: 17rem; max-width: 17rem;
max-height: 22rem; max-height: 22rem;
&:focus {
outline: 0;
}
&:not(.embedded) { &:not(.embedded) {
background: var(--theme-popup-color); background: var(--theme-popup-color);
border: 1px solid var(--theme-popup-divider); border: 1px solid var(--theme-popup-divider);

13
packages/ui/src/components/SelectPopup.svelte
View File

@ -36,6 +36,7 @@
export let showShadow: boolean = true export let showShadow: boolean = true
export let embedded: boolean = false export let embedded: boolean = false
let popupElement: HTMLDivElement | undefined = undefined
let search: string = '' let search: string = ''
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -54,6 +55,11 @@
} }
function onKeydown (key: KeyboardEvent): void { function onKeydown (key: KeyboardEvent): void {
if (key.code === 'Tab') {
dispatch('close')
key.preventDefault()
key.stopPropagation()
}
if (key.code === 'ArrowUp') { if (key.code === 'ArrowUp') {
key.stopPropagation() key.stopPropagation()
key.preventDefault() key.preventDefault()
@ -75,12 +81,19 @@
$: filteredObjects = value.filter((el) => (el.label ?? el.text ?? '').toLowerCase().includes(search.toLowerCase())) $: filteredObjects = value.filter((el) => (el.label ?? el.text ?? '').toLowerCase().includes(search.toLowerCase()))
$: huge = size === 'medium' || size === 'large' $: huge = size === 'medium' || size === 'large'
$: if (popupElement) {
popupElement.focus()
}
</script> </script>
<FocusHandler {manager} /> <FocusHandler {manager} />
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div <div
class="selectPopup" class="selectPopup"
bind:this={popupElement}
tabindex="0"
class:noShadow={showShadow === false} class:noShadow={showShadow === false}
class:full-width={width === 'full'} class:full-width={width === 'full'}
class:max-width-40={width === 'large'} class:max-width-40={width === 'large'}