Merge pull request #2605 from plotly/fix/html-autoFocus

Add hardcoded autoFocus to html attributes

Author: T4rk1n

components/dash-html-components/scripts/data/attributes.json

@@ -1,5 +1,14 @@
 {
     "attributes": {
+        "autoFocus": {
+            "elements": [
+                "button",
+                "input",
+                "select",
+                "textarea"
+            ],
+            "description": "The element should be automatically focused after the page loaded."
+        },
         "accept": {
             "elements": [
                 "form",
@@ -736,18 +745,21 @@
         }
     },
     "elements": {
-        "form": [
-            "accept",
-            "acceptCharset",
-            "action",
-            "autoComplete",
-            "encType",
-            "method",
+        "button": [
+            "autoFocus",
+            "disabled",
+            "form",
+            "formAction",
+            "formEncType",
+            "formMethod",
+            "formNoValidate",
+            "formTarget",
             "name",
-            "noValidate",
-            "target"
+            "type",
+            "value"
         ],
         "input": [
+            "autoFocus",
             "accept",
             "alt",
             "autoComplete",
@@ -780,6 +792,43 @@
             "value",
             "width"
         ],
+        "select": [
+            "autoFocus",
+            "autoComplete",
+            "disabled",
+            "form",
+            "multiple",
+            "name",
+            "required",
+            "size"
+        ],
+        "textarea": [
+            "autoFocus",
+            "autoComplete",
+            "cols",
+            "disabled",
+            "form",
+            "inputMode",
+            "maxLength",
+            "minLength",
+            "name",
+            "placeholder",
+            "readOnly",
+            "required",
+            "rows",
+            "wrap"
+        ],
+        "form": [
+            "accept",
+            "acceptCharset",
+            "action",
+            "autoComplete",
+            "encType",
+            "method",
+            "name",
+            "noValidate",
+            "target"
+        ],
         "Globalattribute": [
             "accessKey",
             "className",
@@ -836,30 +885,6 @@
             "src",
             "type"
         ],
-        "select": [
-            "autoComplete",
-            "disabled",
-            "form",
-            "multiple",
-            "name",
-            "required",
-            "size"
-        ],
-        "textarea": [
-            "autoComplete",
-            "cols",
-            "disabled",
-            "form",
-            "inputMode",
-            "maxLength",
-            "minLength",
-            "name",
-            "placeholder",
-            "readOnly",
-            "required",
-            "rows",
-            "wrap"
-        ],
         "audio": [
             "autoPlay",
             "controls",
@@ -942,18 +967,6 @@
             "src",
             "srcLang"
         ],
-        "button": [
-            "disabled",
-            "form",
-            "formAction",
-            "formEncType",
-            "formMethod",
-            "formNoValidate",
-            "formTarget",
-            "name",
-            "type",
-            "value"
-        ],
         "fieldset": [
             "disabled",
             "form",
@@ -1067,4 +1080,4 @@
             "value"
         ]
     }
-}
+}

components/dash-html-components/scripts/extract-attributes.js

@@ -31,6 +31,19 @@ const supportedAttributes = ['accept', 'accessKey', 'action', 'allow',
 'srcDoc', 'srcLang', 'srcSet', 'start', 'step', 'style', 'summary', 'tabIndex',
 'target', 'title', 'type', 'useMap', 'value', 'width', 'wmode', 'wrap'];
 
+
+const hardcodedAttributes = {
+    autoFocus: {
+        elements: [
+            "button",
+            "input",
+            "select",
+            "textarea"
+        ],
+        description: "The element should be automatically focused after the page loaded."
+    }
+}
+
 // Create a map of HTML attribute to React prop
 // e.g. {"datetime": "dateTime"}
 const attributeMap = supportedAttributes.reduce((map, reactAttribute) => {
@@ -58,7 +71,7 @@ function extractAttributes($) {
     if($table.length !== 1) {
         throw new Error('page structure changed at ' + htmlURL);
     }
-    const attributes = {};
+    const attributes = hardcodedAttributes;
 
     $table.find('tbody tr').each((i, row) => {
         const $children = cheerio(row).find('td');