UX-367 Fix ListBox key events bug

SparkPost · Nov 6, 2020 · 5bb3df1 · 5bb3df1
1 parent f223220
commit 5bb3df1
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 21 deletions.
diff --git a/packages/matchbox/package-lock.json b/packages/matchbox/package-lock.json
diff --git a/packages/matchbox/src/components/ListBox/useOptionConstructor.js b/packages/matchbox/src/components/ListBox/useOptionConstructor.js
@@ -38,17 +38,17 @@ function useOptionConstructor({ options, value, onSelect, open, placeholder }) {
   }
 
   function clearKeysSoFarAfterDelay() {
+    let timeout = setTimeout(function() {
+      setKeysSoFar('');
+      setKeyClear(false);
+    }, 700);
+
     if (keyClear) {
       clearTimeout(timeout);
       setKeyClear(null);
     }
 
     setKeyClear(true);
-
-    let timeout = setTimeout(function() {
-      setKeysSoFar('');
-      setKeyClear(false);
-    }, 700);
   }
 
   // Preps array of option refs
@@ -67,15 +67,15 @@ function useOptionConstructor({ options, value, onSelect, open, placeholder }) {
   }, [focused]);
 
   React.useLayoutEffect(() => {
-    if (keysSoFar) {
+    if (keysSoFar && options) {
       const index = options.findIndex(option =>
-        option.props.value.toLowerCase().startsWith(keysSoFar),
+        option.props.children.toLowerCase().startsWith(keysSoFar),
       );
       if (index >= 0) {
         setFocused(index);
       }
     }
-  }, [keysSoFar]);
+  }, [keysSoFar, options]);
 
   const optionsMarkup = (
     <>

diff --git a/site/gatsby-config.js b/site/gatsby-config.js
@@ -1,5 +1,6 @@
 require('dotenv').config();
 const { flatten } = require('lodash');
+const path = require('path');
 
 module.exports = {
   siteMetadata: {
@@ -86,18 +87,29 @@ module.exports = {
       resolve: 'gatsby-plugin-alias-imports',
       options: {
         // Uncomment these aliases if you want to reference local matchbox packages
-        // alias: {
-        //   '@sparkpost/matchbox': path.resolve(__dirname, '../matchbox/src'),
-        //   '@sparkpost/matchbox-icons': path.resolve(
-        //     __dirname,
-        //     '../matchbox-icons/src'
-        //   ),
-        //   '@sparkpost/design-tokens': path.resolve(
-        //     __dirname,
-        //     '../design-tokens'
-        //   )
-        // },
-        // extensions: []
+        alias:
+          process.env.LOCAL_MATCHBOX === 'true'
+            ? {
+                react: path.resolve(__dirname, '../node_modules/react'),
+                'styled-components': path.resolve(
+                  __dirname,
+                  '../node_modules/styled-components'
+                ),
+                '@sparkpost/design-tokens': path.resolve(
+                  __dirname,
+                  '../packages/design-tokens'
+                ),
+                '@sparkpost/matchbox-icons': path.resolve(
+                  __dirname,
+                  '../packages/matchbox-icons/src'
+                ),
+                '@sparkpost/matchbox': path.resolve(
+                  __dirname,
+                  '../packages/matchbox/src'
+                )
+              }
+            : {},
+        extensions: []
       }
     },
     process.env.GATSBY_ACTIVE_ENV === 'index'

diff --git a/site/package.json b/site/package.json
@@ -54,6 +54,7 @@
     "develop": "gatsby develop -p 8001",
     "format": "prettier --write src/**/*.{js,jsx}",
     "start": "npm run develop",
+    "start:localMatchbox": "LOCAL_MATCHBOX=true npm run develop",
     "serve": "gatsby serve",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
     "index": "GATSBY_ACTIVE_ENV=index gatsby build"
@@ -65,4 +66,4 @@
   "bugs": {
     "url": "https://github.com/SparkPost/matchbox/issues"
   }
-}
+}