fix: Enable keyboard activation of ListBoxFooter components (#503)

Author: dogmar

src/components/ListBoxItem.tsx

@@ -155,12 +155,12 @@ const ListBoxItem = forwardRef<HTMLDivElement, ListBoxItemProps>(
   )
 )
 
-type ListBoxFooterProps = ComponentPropsWithRef<'div'> & {
+type ListBoxFooterProps = ComponentPropsWithRef<typeof ListBoxFooterInner> & {
   children: ReactNode
   leftContent?: ReactNode
   rightContent?: ReactNode
 }
-const ListBoxFooterInner = styled.div<{ focused?: boolean }>(
+const ListBoxFooterInner = styled.button<{ focused?: boolean }>(
   ({ theme, focused = false }) => ({
     ...theme.partials.reset.button,
     display: 'flex',
@@ -193,7 +193,7 @@ const ListBoxFooterInner = styled.div<{ focused?: boolean }>(
       : {}),
   })
 )
-const ListBoxFooter = forwardRef<HTMLDivElement, ListBoxFooterProps>(
+const ListBoxFooter = forwardRef<HTMLButtonElement, ListBoxFooterProps>(
   ({ leftContent, rightContent, children, ...props }, ref) => (
     <ListBoxFooterInner
       tabIndex={0}

src/stories/ComboBox.stories.tsx

@@ -321,14 +321,11 @@ function TagsTemplate() {
         <ComboBox
           isOpen={isOpen}
           inputValue={inputValue}
-          onSelectionChange={(selectedKey) => {
-            if (selectedKey === '$$footer$$') {
-              setSelectedKeys(new Set([...selectedKeys, newKey]))
-              setInputValue('')
-              setIsOpen(false)
-            } else {
-              onSelectionChange(selectedKey)
-            }
+          onSelectionChange={onSelectionChange}
+          onFooterClick={() => {
+            setSelectedKeys(new Set([...selectedKeys, newKey]))
+            setInputValue('')
+            setIsOpen(false)
           }}
           onInputChange={onInputChange}
           inputProps={{ placeholder: 'Pick something' }}

src/stories/ListBox.stories.tsx

@@ -147,6 +147,10 @@ function Template() {
   const shownStep = 4
   const [shownLimit, setShownLimit] = useState<number>(shownStep)
 
+  const onFooterClick = () => {
+    alert('You selected the footer')
+  }
+
   return (
     <Flex
       flexDirection="column"
@@ -185,7 +189,7 @@ function Template() {
             setSelectedKey(key)
           }}
           footerFixed={
-            <ListBoxFooter onClick={() => alert('You clicked the footer')}>
+            <ListBoxFooter onClick={onFooterClick}>
               Fixed Footer - Default
             </ListBoxFooter>
           }
@@ -214,7 +218,7 @@ function Template() {
             setSelectedKey(key)
           }}
           footerFixed={
-            <ListBoxFooterPlus onClick={() => alert('You clicked the footer')}>
+            <ListBoxFooterPlus onClick={onFooterClick}>
               Fixed Footer - Add
             </ListBoxFooterPlus>
           }

src/stories/Select.stories.tsx

@@ -191,6 +191,10 @@ function Template() {
       ? `Selections: ${curItems.map((item) => item.label).join(', ')}`
       : 'Select items'
 
+  const createNewHandler = () => {
+    alert('You selected "Create new."')
+  }
+
   return (
     <Flex
       flexDirection="column"
@@ -235,7 +239,9 @@ function Template() {
           leftContent={<SearchIcon />}
           rightContent={<ListBoxItemChipList chips={curItem?.chips} />}
           dropdownFooterFixed={
-            <ListBoxFooterPlus>Create new</ListBoxFooterPlus>
+            <ListBoxFooterPlus onClick={createNewHandler}>
+              Create new
+            </ListBoxFooterPlus>
           }
         >
           {items.map(({ key, label, description, chips }) => (
@@ -260,8 +266,11 @@ function Template() {
           }}
           defaultOpen={false}
           dropdownFooterFixed={
-            <ListBoxFooterPlus>Create new</ListBoxFooterPlus>
+            <ListBoxFooterPlus onClick={createNewHandler}>
+              Create new
+            </ListBoxFooterPlus>
           }
+          onFooterClick={createNewHandler}
           triggerButton={
             <SelectButton leftContent={curItem ? <CheckIcon /> : <InfoIcon />}>
               {customLabel}
@@ -378,7 +387,9 @@ function Template() {
           leftContent={<SearchIcon />}
           rightContent={<ListBoxItemChipList chips={curItem?.chips} />}
           dropdownFooterFixed={
-            <ListBoxFooterPlus>Create new</ListBoxFooterPlus>
+            <ListBoxFooterPlus onClick={createNewHandler}>
+              Create new
+            </ListBoxFooterPlus>
           }
         >
           {items.map(({ key, label, description, chips }) => (
@@ -401,7 +412,9 @@ function Template() {
           }}
           defaultOpen={false}
           dropdownFooterFixed={
-            <ListBoxFooterPlus>Create new</ListBoxFooterPlus>
+            <ListBoxFooterPlus onClick={createNewHandler}>
+              Create new
+            </ListBoxFooterPlus>
           }
           triggerButton={
             <SelectButton leftContent={curItem ? <CheckIcon /> : <InfoIcon />}>