@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/Autocomplete.jsx

@@ -36,7 +36,12 @@ const VisnsAutocomplete = memo((props) => {
         (value) => {
             if (!value || !api) return null;
 
-            let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
+            // The search text is a PATH segment, so it has to be escaped: an
+            // unencoded "5/12 Smith St" split the path and 404'd, which is a
+            // shape half of Australian addresses take.
+            let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(
+                value
+            )}.json?types=address,poi&access_token=${api}`;
 
             if (country) {
                 url += `&country=${country}`;
@@ -149,20 +154,39 @@ const VisnsAutocomplete = memo((props) => {
 
             const finalValue = displayValue || fallbackValue;
 
-            setSearch(finalValue);
             setResults([]);
             setIsFocused(false);
 
-            // Update form data with the selected value
+            /*
+             * A form that handles the pick owns this field's value.
+             *
+             * It splits the place across its own fields — street line,
+             * suburb, postcode, state — and only the street line belongs in
+             * this input. Writing Mapbox's `place_name` here first left the
+             * box showing the whole formatted address, suburb and state
+             * included, right next to the fields that had just been filled
+             * with those same parts: the field looked like it had mangled
+             * the address rather than parsed it.
+             *
+             * The `inputValue` effect below cannot undo that, because it
+             * only fires when the form's value *changes*, and the form's
+             * street line is usually exactly what the user typed. So don't
+             * write the wrong value in the first place: hand the place to
+             * the form and follow whatever it puts back.
+             */
+            if (onSelect) {
+                onSelect(place, field);
+                return;
+            }
+
+            setSearch(finalValue);
+
+            // Standalone use (no form to parse the place): the field keeps
+            // the full formatted address, which is the only useful value.
             setFormData((prevState) => ({
                 ...prevState,
                 [field]: finalValue,
             }));
-
-            // Call the onSelect callback with the place object and field
-            if (onSelect) {
-                onSelect(place, field);
-            }
         },
         [field, onSelect, setFormData]
     );
@@ -176,13 +200,34 @@ const VisnsAutocomplete = memo((props) => {
         });
     }, []);
 
-    // Effect to handle overwrite toggle
+    // What is in the box, readable without making it a trigger.
+    const searchRef = useRef('');
+    const isFocusedRef = useRef(false);
+    searchRef.current = search;
+    isFocusedRef.current = isFocused;
+
+    /*
+     * Switching autocomplete back on searches for whatever is already typed.
+     *
+     * Deliberately NOT keyed on `search`: typing is already handled by the
+     * debounced path, and this effect calls `performSearch` directly. Keyed
+     * on `search` it fired once per keystroke and bypassed the 500ms debounce
+     * entirely — 21 characters produced 21 Mapbox requests (42 with the CORS
+     * preflight each one triggered), where the debounce is there to produce
+     * one. Focus is handled by `handleFocus`, so it is not a trigger either.
+     */
     useEffect(() => {
-        if (!overwrite && search && search.length > 1 && isFocused) {
+        if (overwrite) {
+            return;
+        }
+
+        const value = searchRef.current;
+
+        if (isFocusedRef.current && value && value.length > 1) {
             setIsLoading(true);
-            performSearch(1, search);
+            performSearch(1, value);
         }
-    }, [overwrite, search, performSearch, isFocused]);
+    }, [overwrite, performSearch]);
 
     // Effect to sync with inputValue prop
     useEffect(() => {

package/src/components/Breadcrumb.jsx

@@ -4,6 +4,21 @@ import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { ChevronRight } from 'lucide-react';
 
+/**
+ * The page header trail: parent link → page → record name.
+ *
+ * It stays an `<h1>` on purpose. Three stylesheets — GenericIndex,
+ * GenericDetail and GenericFormBuilder — style this element through
+ * `.crmtitle h1` descendant selectors, so changing the tag to the `<nav><ol>`
+ * a breadcrumb "should" be would silently restyle every index, detail and
+ * form-builder page in the app. The semantics are fixed the way that costs
+ * nothing instead: a labelled `nav` around it, the separators hidden from
+ * assistive tech, and the final crumb marked as the current page.
+ *
+ * Before this, a screen reader read the whole trail as one heading —
+ * "Customers greater-than Acme Pty Ltd" — with the chevrons announced as
+ * content and no indication which part was where you actually were.
+ */
 function Breadcrumb({ data, page }) {
     // Function to get nested data, handling array of keys
     const getNestedData = (data, keys) => {
@@ -69,6 +84,7 @@ function Breadcrumb({ data, page }) {
     };
 
     return (
+        <nav aria-label="Breadcrumb">
         <h1>
             {page?.parentTitle && (
                 <>
@@ -77,7 +93,7 @@ function Breadcrumb({ data, page }) {
                     ) : (
                         <span>{parse(page.parentTitle)}</span>
                     )}
-                    <ChevronRight strokeWidth={2} size={18} />
+                    <ChevronRight strokeWidth={2} size={16} aria-hidden="true" />
                 </>
             )}
 
@@ -113,9 +129,11 @@ function Breadcrumb({ data, page }) {
                 )
             )}
 
+            {/* The record name is the last crumb whenever there is one, so it
+                is the one that carries "you are here". */}
             {page.titleKey && data && (
-                <>
-                    <ChevronRight strokeWidth={2} size={18} />
+                <span aria-current="page">
+                    <ChevronRight strokeWidth={2} size={16} aria-hidden="true" />
                     {Array.isArray(page.titleKey) ? (
                         <>
                             {page.titleText && (
@@ -145,7 +163,7 @@ function Breadcrumb({ data, page }) {
                                   )}
                         </>
                     )}
-                </>
+                </span>
             )}
 
             {/* Display image if condition is met */}
@@ -163,6 +181,7 @@ function Breadcrumb({ data, page }) {
                 />
             )}
         </h1>
+        </nav>
     );
 }