playbook_ui 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11607 → 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11641

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcd436ebf1d8c2a0442f88c7bd24280b90e805a2cbf764d36e60a73bf04f8a3e
-  data.tar.gz: 57f069f6198858056e3217cd8032a03a41a78204bea676892f9cdc4ccd1fb4e8
+  metadata.gz: 26ef9154b98ad4d5d762b37915fa398314c6020fc3cf0c0b42b9e074fd55f569
+  data.tar.gz: 5a79125ffb800db93c0ebe22ad143167bac0f9c018ebc33beba7a1c2049ec3fc
 SHA512:
-  metadata.gz: 39bf03e47685ed9c93b72ca94fc4b47a3decb6de1c61b690db4f84295595a5d3375378f83c37fab02c72bbecd4feea2bb792861c19efe4ce4201901907d2b2b2
-  data.tar.gz: d95721f238cf35d91464c1efe1e6f7aa0852a5e17facd89dc03c45c45c431eb5f80924ea9e0c261955bc596860d973f11814692b711a33bc95a1a02baff033f4
+  metadata.gz: 812c93c1d3667ad67d5e7d810b5d4a399c3ac6d11c003b231b32ed8dafb8742e4097b37b215f8a7ea9d5474626b57d8ead7dc11d60483b72a701efeecc9c3063
+  data.tar.gz: d0eeafe285857f375b45699aed9f1d4a25915c99b50e6a50d148937b4de0ce6e2d99a67e986305d83ebf6e36a4d67b3e9daed119a0138ae1f3cf7ca858d04cd2

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -30,6 +30,7 @@ type TableHeaderCellProps = {
   headerChildren?: React.ReactNode | React.ReactNode[]
   isPinnedLeft?: boolean
   loading?: boolean
+  showToggleWithInlineRowLoading?: boolean
   sortIcon?: string | string[]
   table?: Table<GenericObject>
 } & GlobalProps
@@ -58,6 +59,7 @@ export const TableHeaderCell = ({
     selectableRows,
     hasAnySubRows,
     showActionsBar,
+    showToggleWithInlineRowLoading,
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
@@ -220,7 +222,7 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && (hasAnySubRows || inlineRowLoading) && !expandByDepth && (
+          {isToggleExpansionEnabled &&  ((hasAnySubRows) || (inlineRowLoading && showToggleWithInlineRowLoading)) && !expandByDepth && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
           {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -39,6 +39,7 @@ export const TableHeader = ({
     hasAnySubRows,
     showActionsBar,
     selectableRows,
+    showToggleWithInlineRowLoading,
     responsive,
     headerRef,
     virtualizedRows,
@@ -92,6 +93,7 @@ export const TableHeader = ({
                   isPinnedLeft={isPinnedLeft}
                   key={`${header.id}-header`}
                   loading={loading}
+                  showToggleWithInlineRowLoading={showToggleWithInlineRowLoading}
                   sortIcon={sortIcon}
                   table={table}
               />
@@ -136,6 +138,7 @@ export const TableHeader = ({
                   isVirtualized
                   key={`${header.id}-header-virtualized`}
                   loading={loading}
+                  showToggleWithInlineRowLoading={showToggleWithInlineRowLoading}
                   sortIcon={sortIcon}
                   table={table}
               />

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -63,6 +63,7 @@ type AdvancedTableProps = {
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
+  showToggleWithInlineRowLoading?: boolean,
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -109,6 +110,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
+    showToggleWithInlineRowLoading = false,
     sortControl,
     stickyLeftColumn,
     tableData,
@@ -355,6 +357,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
+            showToggleWithInlineRowLoading={showToggleWithInlineRowLoading}
             sortControl={sortControl}
             stickyLeftColumn={stickyLeftColumn}
             subRowHeaders={tableOptions?.subRowHeaders}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -108,6 +108,48 @@ const MOCK_DATA_WITH_ID = [
   },
 ]
 
+const MOCK_DATA_NO_SUBROWS = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [],
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "30",
+    scheduledMeetings: "22",
+    attendanceRate: "80%",
+    completedClasses: "7",
+    classCompletionRate: "55%",
+    graduatedStudents: "45",
+    children: [],
+  },
+]
+
 const columnDefinitions = [
   {
     accessor: "year",
@@ -509,6 +551,23 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   expect(inlineLoading).toBeInTheDocument()
 })
 
+test("showToggleWithInlineRowLoading prop shows header toggle when inlineRowLoading is true", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        enableToggleExpansion="all"
+        inlineRowLoading
+        showToggleWithInlineRowLoading
+        tableData={MOCK_DATA_NO_SUBROWS}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const headerToggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
+  expect(headerToggleButton).toBeInTheDocument()
+})
+
 test("responsive prop functions as expected", () => {
   render(
     <AdvancedTable

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_show_toggle.jsx

@@ -0,0 +1,59 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
+
+const AdvancedTableInlineRowLoadingShowToggle = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  //Render the subRow header rows
+  const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          inlineRowLoading
+          showToggleWithInlineRowLoading
+          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableInlineRowLoadingShowToggle

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_show_toggle.md

@@ -0,0 +1,5 @@
+The `showToggleWithInlineRowLoading` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with enoty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
+
+In this code example, all 3 rows have empty children arrays. The toggle all button would not render (prior to an initial row expansion) without `showToggleWithInlineRowLoading` in place. 
+
+This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js

@@ -0,0 +1,202 @@
+export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      year: "2022",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "25",
+      scheduledMeetings: "17",
+      attendanceRate: "75%",
+      completedClasses: "5",
+      classCompletionRate: "45%",
+      graduatedStudents: "32",
+      children: [],
+      // children: [
+      //   {
+      //     year: "2022",
+      //     quarter: "Q1",
+      //     month: null,
+      //     day: null,
+      //     newEnrollments: "2",
+      //     scheduledMeetings: "35",
+      //     attendanceRate: "32%",
+      //     completedClasses: "15",
+      //     classCompletionRate: "52%",
+      //     graduatedStudents: "36",
+      //     children: [
+      //       {
+      //         year: "2022",
+      //         quarter: "Q1",
+      //         month: "January",
+      //         day: null,
+      //         newEnrollments: "16",
+      //         scheduledMeetings: "20",
+      //         attendanceRate: "11%",
+      //         completedClasses: "13",
+      //         classCompletionRate: "47%",
+      //         graduatedStudents: "28",
+      //         children: [
+      //           {
+      //             year: "2022",
+      //             quarter: "Q1",
+      //             month: "January",
+      //             day: "15",
+      //             newEnrollments: "34",
+      //             scheduledMeetings: "28",
+      //             attendanceRate: "97%",
+      //             completedClasses: "20",
+      //             classCompletionRate: "15%",
+      //             graduatedStudents: "17",
+      //           },
+      //           {
+      //             year: "2022",
+      //             quarter: "Q1",
+      //             month: "January",
+      //             day: "25",
+      //             newEnrollments: "43",
+      //             scheduledMeetings: "23",
+      //             attendanceRate: "66%",
+      //             completedClasses: "26",
+      //             classCompletionRate: "47%",
+      //             graduatedStudents: "9",
+      //           },
+      //         ],
+      //       },
+      //       {
+      //         year: "2022",
+      //         quarter: "Q1",
+      //         month: "May",
+      //         day: null,
+      //         newEnrollments: "20",
+      //         scheduledMeetings: "41",
+      //         attendanceRate: "95%",
+      //         completedClasses: "26",
+      //         classCompletionRate: "83%",
+      //         graduatedStudents: "43",
+      //         children: [
+      //           {
+      //             year: "2011",
+      //             quarter: "Q1",
+      //             month: "May",
+      //             day: "2",
+      //             newEnrollments: "19",
+      //             scheduledMeetings: "35",
+      //             attendanceRate: "69%",
+      //             completedClasses: "8",
+      //             classCompletionRate: "75%",
+      //             graduatedStudents: "23",
+      //           },
+      //         ],
+      //       },
+      //     ],
+      //   },
+      // ],
+    },
+    {
+      year: "2023",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "10",
+      scheduledMeetings: "15",
+      attendanceRate: "65%",
+      completedClasses: "4",
+      classCompletionRate: "49%",
+      graduatedStudents: "29",
+      children: [],
+      // children: [
+      //   {
+      //     year: "2023",
+      //     quarter: "Q1",
+      //     month: null,
+      //     day: null,
+      //     newEnrollments: "2",
+      //     scheduledMeetings: "35",
+      //     attendanceRate: "32%",
+      //     completedClasses: "15",
+      //     classCompletionRate: "52%",
+      //     graduatedStudents: "36",
+      //     children: [
+      //       {
+      //         year: "2023",
+      //         quarter: "Q1",
+      //         month: "March",
+      //         day: null,
+      //         newEnrollments: "16",
+      //         scheduledMeetings: "20",
+      //         attendanceRate: "11%",
+      //         completedClasses: "13",
+      //         classCompletionRate: "47%",
+      //         graduatedStudents: "28",
+      //         children: [
+      //           {
+      //             year: "2023",
+      //             quarter: "Q1",
+      //             month: "March",
+      //             day: "10",
+      //             newEnrollments: "34",
+      //             scheduledMeetings: "28",
+      //             attendanceRate: "97%",
+      //             completedClasses: "20",
+      //             classCompletionRate: "15%",
+      //             graduatedStudents: "17",
+      //           },
+      //           {
+      //             year: "2023",
+      //             quarter: "Q1",
+      //             month: "March",
+      //             day: "11",
+      //             newEnrollments: "43",
+      //             scheduledMeetings: "23",
+      //             attendanceRate: "66%",
+      //             completedClasses: "26",
+      //             classCompletionRate: "47%",
+      //             graduatedStudents: "9",
+      //           },
+      //         ],
+      //       },
+      //       {
+      //         year: "2023",
+      //         quarter: "Q1",
+      //         month: "April",
+      //         day: null,
+      //         newEnrollments: "20",
+      //         scheduledMeetings: "41",
+      //         attendanceRate: "95%",
+      //         completedClasses: "26",
+      //         classCompletionRate: "83%",
+      //         graduatedStudents: "43",
+      //         children: [
+      //           {
+      //             year: "2023",
+      //             quarter: "Q1",
+      //             month: "April",
+      //             day: "15",
+      //             newEnrollments: "19",
+      //             scheduledMeetings: "35",
+      //             attendanceRate: "69%",
+      //             completedClasses: "8",
+      //             classCompletionRate: "75%",
+      //             graduatedStudents: "23",
+      //           },
+      //         ],
+      //       },
+      //     ],
+      //   },
+      // ],
+    },
+  ]
+  

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -54,6 +54,7 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_loading: Loading State
   - advanced_table_inline_row_loading: Inline Row Loading
+  - advanced_table_inline_row_loading_show_toggle: Inline Row Loading with Show Toggle
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -45,4 +45,5 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTableInlineRowLoadingShowToggle } from './_advanced_table_inline_row_loading_show_toggle.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -314,14 +314,18 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (!hasTyped) setHasTyped(true)
+
     setInputValue(evt.target.value)
+
     let phoneNumberData
+
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
       phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
     } else {
       phoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
     }
+
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
     isValid(itiRef.current.isValidNumber())
@@ -370,11 +374,26 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
       inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
       inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-    }
-    if (formatAsYouType) {
-      inputRef.current?.addEventListener("input", (evt) => {
-        handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
-      });
+
+      // Handle formatAsYouType with input event
+      if (formatAsYouType) {
+        inputRef.current.addEventListener("input", (evt: Event) => {
+          const target = evt.target as HTMLInputElement
+          const formattedValue = target.value
+
+          // Update internal state
+          setInputValue(formattedValue)
+          setHasTyped(true)
+
+          // Get phone number data with unformatted number
+          const formattedPhoneNumberData = getCurrentSelectedData(telInputInit, formattedValue)
+          const phoneNumberData = {...formattedPhoneNumberData, number: unformatNumber(formattedPhoneNumberData.number)}
+
+          setSelectedData(phoneNumberData)
+          onChange(phoneNumberData)
+          isValid(telInputInit.isValidNumber())
+        })
+      }
     }
   }, [])
 
@@ -389,7 +408,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     label,
     name,
     onBlur: validateErrors,
-    onChange: handleOnChange,
+    onChange: formatAsYouType ? undefined : handleOnChange,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
 import Typeahead from './_typeahead'
 
 const options = [
@@ -137,4 +137,38 @@ test('typeahead with colored pills', () => {
   const kit = screen.getByTestId('pills-color-test')
   const pill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
   expect(pill).toBeInTheDocument()
+})
+
+test('typeahead with defaultValue with focus behavior', async () => {
+  render(
+    <Typeahead
+        data={{ testid: 'default-value-focus-test' }}
+        defaultValue={[options[1]]}
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('default-value-focus-test')
+  const inputDiv = kit.querySelector(".typeahead-kit-select__single-value")
+  expect(inputDiv).toHaveTextContent("Red")
+  
+  // Test that the control can receive focus
+  const control = kit.querySelector('.typeahead-kit-select__control')
+  expect(control).toBeInTheDocument()
+  
+  // Simulate opening the menu by clicking the control
+  fireEvent.mouseDown(control)
+  
+  // Wait for menu to appear
+  await waitFor(() => {
+    const menu = kit.querySelector('.typeahead-kit-select__menu')
+    expect(menu).toBeInTheDocument()
+  })
+  
+  // Check that the correct option has the focused class
+  await waitFor(() => {
+    const focusedOption = kit.querySelector('.typeahead-kit-select__option--is-focused')
+    expect(focusedOption).toBeInTheDocument()
+    expect(focusedOption).toHaveTextContent('Red')
+  })
 })

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef} from 'react'
+import React, { useState, useEffect, forwardRef, useRef} from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -106,6 +106,8 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   const [inputValue, setInputValue] = useState("")
   // State to track if form has been submitted to control validation display for react rendered rails kit
   const [formSubmitted, setFormSubmitted] = useState(false)
+  // State to track if user has made a selection (to disable defaultValue focus behavior)
+  const [hasUserSelected, setHasUserSelected] = useState(false)
 
   // If preserveSearchInput is true, we need to control the input value
   const handleInputChange = preserveSearchInput
@@ -139,6 +141,69 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       }
     : props.onBlur
 
+  // Create a ref to access React Select instance
+  const selectRef = useRef<any>(null)
+
+  // Configure focus on selected option using React Select's API
+  const handleMenuOpen = () => {
+    setTimeout(() => {
+      let currentValue = props.value || props.defaultValue
+
+      // Handle react rendered rails version which passes arrays even for single selects
+      if (Array.isArray(currentValue) && currentValue.length > 0) {
+        currentValue = currentValue[0]
+      }
+      
+      // Only apply custom focus if user has NOT made a selection yet
+      if (currentValue && selectRef.current && !hasUserSelected && !props.isMulti) {
+
+        const options = props.options
+        if (options) {
+          // Find the index of the current value
+          const focusedIndex = options.findIndex((option: any) => {
+            const optionValue = props.getOptionValue ? props.getOptionValue(option) : option.value
+            const currentOptionValue = props.getOptionValue ? props.getOptionValue(currentValue) : currentValue.value
+            return optionValue === currentOptionValue
+          })
+          
+          if (focusedIndex >= 0 && options[focusedIndex]) {
+            // Use React Select's internal state to set focused option
+            if (selectRef.current && selectRef.current.setState) {
+              const targetOption = options[focusedIndex]
+              selectRef.current.setState({
+                focusedOption: targetOption,
+                focusedValue: null
+              })
+              
+              // Handle scrolling so selected option is visible
+              setTimeout(() => {
+                if (selectRef.current && selectRef.current.menuListRef) {
+                  const menuElement = selectRef.current.menuListRef
+                  if (menuElement && menuElement.children && menuElement.children[focusedIndex]) {
+                    // Calculate the position of the selected option and scroll the menu container
+                    const optionElement = menuElement.children[focusedIndex] as HTMLElement
+                    const optionTop = optionElement.offsetTop
+                    const optionHeight = optionElement.offsetHeight
+                    const menuHeight = menuElement.clientHeight
+                    
+                    // Set the menu's scrollTop to position the selected option in the middle
+                    const scrollToMiddle = optionTop - (menuHeight / 2) + (optionHeight / 2)
+                    menuElement.scrollTop = Math.max(0, scrollToMiddle)
+                  }
+                }
+              }, 20)
+            }
+          }
+        }
+      }
+    }, 0)
+    
+    // Call original onMenuOpen if provided
+    if (props.onMenuOpen) {
+      props.onMenuOpen()
+    }
+  }
+
   const selectProps = {
     cacheOptions: true,
     required,
@@ -172,6 +237,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     ...(preserveSearchInput ? { inputValue } : {}),
     onInputChange: handleInputChange,
     onBlur: handleBlur,
+    onMenuOpen: handleMenuOpen,
     ...props,
   }
 
@@ -261,6 +327,8 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
     if (action === 'select-option') {
       setFormSubmitted(false)
+      // Mark that user has made a selection to disable default value focus behavior
+      setHasUserSelected(true)
     }
 
     // If a value is selected and we're preserving input on blur, clear the input
@@ -269,7 +337,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     }
 
     if (action === 'select-option') {
-      if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
+      if (selectProps.onMultiValueClick && option) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
       document.dispatchEvent(multiValueClearEvent)
     }
@@ -317,6 +385,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
           error={errorDisplay}
           isDisabled={disabled}
           onChange={handleOnChange}
+          ref={selectRef}
           {...selectProps}
       />
     </div>