@coopdigital/react 1.29.2 → 1.30.0

package/src/components/Combobox/combobox-utils.ts

@@ -20,20 +20,41 @@ export interface ComboboxItem extends HTMLAttributes<HTMLLIElement> {
 
 export type ComboboxOption = ComboboxItem | string
 
-export const defaultFilter = (items: ComboboxItem[], inputValue: string): ComboboxItem[] => {
-  return inputValue !== ""
+export const defaultFilter = (items: ComboboxItem[], inputValue: string): ComboboxItem[] =>
+  inputValue !== ""
     ? matchSorter(items, inputValue, {
         keys: [(item) => [item.label ?? item.value]],
       })
     : items
-}
 
 export const defaultIsItemDisabled = (item: ComboboxItem): boolean => item.disabled ?? false
 
 export const defaultItemToString = (item: ComboboxItem | null): string =>
   item?.label ?? item?.value ?? ""
 
+// Convert options given as strings or objects into a list of items
 export const normalizeOptions = (options: ComboboxOption[]): ComboboxItem[] =>
   options
     .filter((option) => option && typeof option !== "number")
     .map((option) => (typeof option === "string" ? { value: option } : option))
+
+// Created once, as localeCompare with options creates a new collator on
+// every call, which is slow when checking a long list of options
+const collator = new Intl.Collator(undefined, { sensitivity: "base" })
+
+// Check whether typed text matches an option, ignoring case, accents and
+// surrounding whitespace
+export const isMatchingText = (optionText: string, text: string): boolean =>
+  collator.compare(optionText.trim(), text.trim()) === 0
+
+// Find the item for an option given as a value or an object. An option that
+// is not in the list, such as a custom value, is kept as it is.
+export const resolveOption = (
+  option: ComboboxOption | null | undefined,
+  items: ComboboxItem[]
+): ComboboxItem | null => {
+  if (option === null || option === undefined) return null
+
+  const item = typeof option === "string" ? { value: option } : option
+  return items.find(({ value }) => value === item.value) ?? item
+}

package/src/components/ValidationSummary/validationsummary-utils.ts

@@ -26,9 +26,28 @@ const getFieldKeys = (field: string, id?: string): string[] => [
   field,
 ]
 
+const VISIBLE_CONTROL = 'input:not([type="hidden"]), select, textarea'
+
+const isHiddenInput = (el: Element): el is HTMLInputElement =>
+  el instanceof HTMLInputElement && el.type === "hidden"
+
+// Components such as Combobox submit their value from a hidden input, which
+// cannot be focused. Find the visible control in the closest wrapper that
+// has one. The search stops before the form, so a hidden input placed
+// directly in the form is not matched to an unrelated field.
+const getVisibleControl = (form: HTMLFormElement, el: Element): Element => {
+  for (let node = el.parentElement; node && node !== form; node = node.parentElement) {
+    const control = node.querySelector(VISIBLE_CONTROL)
+    if (control) return control
+  }
+
+  return el
+}
+
 // Find the field for a validation error. Try each key from getFieldKeys
 // and return immediately if there is a match. For a RadioNodeList,
-// return the first element only.
+// return the first element only. A hidden input is swapped for its visible
+// control.
 export const getFieldElement = (
   form: HTMLFormElement,
   field: string,
@@ -37,7 +56,7 @@ export const getFieldElement = (
   for (const key of getFieldKeys(field, id)) {
     const item = form.elements.namedItem(key)
     const el = item instanceof RadioNodeList ? item[0] : item
-    if (el instanceof Element) return el
+    if (el instanceof Element) return isHiddenInput(el) ? getVisibleControl(form, el) : el
   }
 
   return null