Merge pull request #2896 from insistence/insistence-dev

The tabIndex parameter of Div can accept number or string type

Author: T4rk1n

CHANGELOG.md

@@ -8,6 +8,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 - [#2881](https://github.com/plotly/dash/pull/2881) Add outputs_list to window.dash_clientside.callback_context. Fixes [#2877](https://github.com/plotly/dash/issues/2877).
 
+## Fixed
+
+- [#2896](https://github.com/plotly/dash/pull/2896) The tabIndex parameter of Div can accept number or string type. Fixes [#2891](https://github.com/plotly/dash/issues/2891)
+
 ## [2.17.1] - 2024-06-12
 
 ## Fixed

components/dash-html-components/scripts/generate-components.js

@@ -56,7 +56,8 @@ const NUMERIC_PROPERTIES = [
     'cols',
     'colSpan',
     'size',
-    'step'
+    'step',
+    'tabIndex'
 ];
 
 const PROP_TYPES = {

components/dash-html-components/tests/test_div_tabIndex.py

@@ -0,0 +1,53 @@
+from dash import Dash, Input, Output, State, html
+
+
+def test_dt001_div_tabindex_accept_string_and_number_type(dash_duo):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Div(id="string-div", tabIndex="1"),
+            html.Div(id="number-div", tabIndex=1),
+            html.Button("string", id="trigger-string"),
+            html.Button("number", id="trigger-number"),
+            html.Pre(id="output-string-result"),
+            html.Pre(id="output-number-result"),
+        ],
+        style={"padding": 50},
+    )
+
+    @app.callback(
+        Output("output-string-result", "children"),
+        Input("trigger-string", "n_clicks"),
+        State("string-div", "tabIndex"),
+        prevent_initial_call=True,
+    )
+    def show_div_tabindex_string_type(n_clicks, tabindex):
+        if n_clicks:
+            if isinstance(tabindex, str):
+                return "success"
+        return "fail"
+
+    @app.callback(
+        Output("output-number-result", "children"),
+        Input("trigger-number", "n_clicks"),
+        State("number-div", "tabIndex"),
+        prevent_initial_call=True,
+    )
+    def show_div_tabindex_number_type(n_clicks, tabindex):
+        if n_clicks:
+            if isinstance(tabindex, int):
+                return "success"
+        return "fail"
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_element("#trigger-string").click()
+    dash_duo.wait_for_element("#trigger-number").click()
+    dash_duo.wait_for_text_to_equal(
+        "#output-string-result",
+        "success",
+    )
+    dash_duo.wait_for_text_to_equal(
+        "#output-number-result",
+        "success",
+    )