Add tabindex to Popover trigger

This commit is contained in:
Justin Edmund 2023-06-17 19:02:15 -07:00
parent 406eaddb87
commit f0bfd0bbd9
2 changed files with 4 additions and 2 deletions

View file

@ -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}

View file

@ -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">