Add tabindex to Popover trigger
This commit is contained in:
parent
406eaddb87
commit
f0bfd0bbd9
2 changed files with 4 additions and 2 deletions
|
|
@ -23,6 +23,7 @@ interface Props extends ComponentProps<'div'> {
|
||||||
className?: string
|
className?: string
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
}
|
}
|
||||||
|
triggerTabIndex?: number
|
||||||
value?: {
|
value?: {
|
||||||
element: ReactNode
|
element: ReactNode
|
||||||
rawValue: string
|
rawValue: string
|
||||||
|
|
@ -83,6 +84,7 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(function Popover(
|
||||||
<PopoverPrimitive.Trigger
|
<PopoverPrimitive.Trigger
|
||||||
className={triggerClasses}
|
className={triggerClasses}
|
||||||
data-placeholder={!props.value}
|
data-placeholder={!props.value}
|
||||||
|
tabIndex={props.triggerTabIndex}
|
||||||
>
|
>
|
||||||
{icon}
|
{icon}
|
||||||
{value}
|
{value}
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ interface Props {
|
||||||
currentRaid?: Raid
|
currentRaid?: Raid
|
||||||
defaultRaid?: Raid
|
defaultRaid?: Raid
|
||||||
minimal?: boolean
|
minimal?: boolean
|
||||||
|
tabIndex?: number
|
||||||
onChange?: (raid?: Raid) => void
|
onChange?: (raid?: Raid) => void
|
||||||
onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
|
onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
|
||||||
}
|
}
|
||||||
|
|
@ -114,7 +115,6 @@ const RaidCombobox = (props: Props) => {
|
||||||
// Set current raid and section when the current raid changes
|
// Set current raid and section when the current raid changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (props.currentRaid) {
|
if (props.currentRaid) {
|
||||||
console.log('We are here with a raid')
|
|
||||||
setCurrentRaid(props.currentRaid)
|
setCurrentRaid(props.currentRaid)
|
||||||
setCurrentSection(props.currentRaid.group.section)
|
setCurrentSection(props.currentRaid.group.section)
|
||||||
}
|
}
|
||||||
|
|
@ -183,7 +183,6 @@ const RaidCombobox = (props: Props) => {
|
||||||
const { top: itemTop } = node.getBoundingClientRect()
|
const { top: itemTop } = node.getBoundingClientRect()
|
||||||
|
|
||||||
listRef.current.scrollTop = itemTop - listTop
|
listRef.current.scrollTop = itemTop - listTop
|
||||||
console.log('Focusing node')
|
|
||||||
node.focus()
|
node.focus()
|
||||||
setScrolled(true)
|
setScrolled(true)
|
||||||
}
|
}
|
||||||
|
|
@ -534,6 +533,7 @@ const RaidCombobox = (props: Props) => {
|
||||||
onOpenChange={toggleOpen}
|
onOpenChange={toggleOpen}
|
||||||
placeholder={t('raids.placeholder')}
|
placeholder={t('raids.placeholder')}
|
||||||
trigger={{ className: 'Raid' }}
|
trigger={{ className: 'Raid' }}
|
||||||
|
triggerTabIndex={props.tabIndex}
|
||||||
value={renderTriggerContent()}
|
value={renderTriggerContent()}
|
||||||
>
|
>
|
||||||
<Command className="Raid Combobox">
|
<Command className="Raid Combobox">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue