From dd6ed5be43f1718be06c3d26f1dd967c75a8cfff Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Thu, 6 Jul 2023 15:28:12 -0600 Subject: [PATCH 01/10] Add class to Input elements so that CSS rules can be scoped --- CHANGELOG.md | 6 ++++ .../src/components/Input.react.js | 2 ++ .../src/components/css/input.css | 4 +-- .../integration/input/test_input_basics.py | 32 +++++++++++++++++++ 4 files changed, 42 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc8caf8c7f..64762f8dde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to `dash` will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/). +## UNRELEASED + +## Fixed + +- [dash-embedded-component #83](https://github.com/plotly/dash-embedded-component/issues/83) CSS for input elements not scoped to Dash application + ## [2.11.1] - 2023-06-29 ## Fixed diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js index 18bf374a99..1fb13e271e 100644 --- a/components/dash-core-components/src/components/Input.react.js +++ b/components/dash-core-components/src/components/Input.react.js @@ -66,6 +66,7 @@ export default class Input extends PureComponent { data-dash-is-loading={ (loading_state && loading_state.is_loading) || undefined } + className={`dash-input ${this.props.className || ''}`} ref={this.input} onBlur={this.onBlur} onChange={this.onChange} @@ -73,6 +74,7 @@ export default class Input extends PureComponent { {...valprops} {...omit( [ + 'className', 'debounce', 'value', 'n_blur', diff --git a/components/dash-core-components/src/components/css/input.css b/components/dash-core-components/src/components/css/input.css index afc8bd52ba..20c73ed21b 100644 --- a/components/dash-core-components/src/components/css/input.css +++ b/components/dash-core-components/src/components/css/input.css @@ -1,7 +1,7 @@ -input:invalid { +input.dash-input:invalid { outline: solid red; } -input:valid { +input.dash-input:valid { outline: none black; } \ No newline at end of file diff --git a/components/dash-core-components/tests/integration/input/test_input_basics.py b/components/dash-core-components/tests/integration/input/test_input_basics.py index 7a693ad80e..16cf01d579 100644 --- a/components/dash-core-components/tests/integration/input/test_input_basics.py +++ b/components/dash-core-components/tests/integration/input/test_input_basics.py @@ -1,5 +1,6 @@ import pytest from selenium.common.exceptions import WebDriverException +from selenium.webdriver.common.by import By from dash import Dash, Input, Output, dcc, html @@ -72,3 +73,34 @@ def test_inbs002_user_class(dash_dcc): dash_dcc.wait_for_style_to_equal(".test-input-css input", "width", "420px") assert dash_dcc.get_logs() == [] + + +def test_inbs003_styles_are_scoped(dash_dcc): + app = Dash(__name__) + + app.index_string = """ + + + + {%app_entry%} + {%config%} + {%scripts%} + {%renderer%} + + + """ + + app.layout = html.Div( + className="test-input-css", + children=[dcc.Input(id="DashInput", required=True, className="unittest")], + ) + + dash_dcc.start_server(app) + + external_input = dash_dcc.driver.find_element(By.ID, "ExternalInput") + dash_input = dash_dcc.driver.find_element(By.CLASS_NAME, "unittest") + + external_outline_css = external_input.value_of_css_property("outline") + dash_outline_css = dash_input.value_of_css_property("outline") + + assert external_outline_css != dash_outline_css From 745f0f31d393eff9a4991da5ffd60e6f0cfb6f6d Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Fri, 7 Jul 2023 09:17:49 -0600 Subject: [PATCH 02/10] Small changes to address code review feedback --- .../dash-core-components/src/components/Input.react.js | 2 +- components/dash-core-components/src/components/css/input.css | 2 +- .../tests/integration/input/test_input_basics.py | 5 ++--- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js index 1fb13e271e..5bd9c1a0ca 100644 --- a/components/dash-core-components/src/components/Input.react.js +++ b/components/dash-core-components/src/components/Input.react.js @@ -66,7 +66,7 @@ export default class Input extends PureComponent { data-dash-is-loading={ (loading_state && loading_state.is_loading) || undefined } - className={`dash-input ${this.props.className || ''}`} + className={['dash-input', this.props.className].join(' ')} ref={this.input} onBlur={this.onBlur} onChange={this.onChange} diff --git a/components/dash-core-components/src/components/css/input.css b/components/dash-core-components/src/components/css/input.css index 20c73ed21b..2e7193a0ff 100644 --- a/components/dash-core-components/src/components/css/input.css +++ b/components/dash-core-components/src/components/css/input.css @@ -4,4 +4,4 @@ input.dash-input:invalid { input.dash-input:valid { outline: none black; -} \ No newline at end of file +} diff --git a/components/dash-core-components/tests/integration/input/test_input_basics.py b/components/dash-core-components/tests/integration/input/test_input_basics.py index 16cf01d579..853caef319 100644 --- a/components/dash-core-components/tests/integration/input/test_input_basics.py +++ b/components/dash-core-components/tests/integration/input/test_input_basics.py @@ -1,6 +1,5 @@ import pytest from selenium.common.exceptions import WebDriverException -from selenium.webdriver.common.by import By from dash import Dash, Input, Output, dcc, html @@ -97,8 +96,8 @@ def test_inbs003_styles_are_scoped(dash_dcc): dash_dcc.start_server(app) - external_input = dash_dcc.driver.find_element(By.ID, "ExternalInput") - dash_input = dash_dcc.driver.find_element(By.CLASS_NAME, "unittest") + external_input = dash_dcc.find_element("#ExternalInput") + dash_input = dash_dcc.find_element(".unittest") external_outline_css = external_input.value_of_css_property("outline") dash_outline_css = dash_input.value_of_css_property("outline") From aa85b3c23f559438689f3c4e0c15744d4032bc20 Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Mon, 10 Jul 2023 07:55:10 -0600 Subject: [PATCH 03/10] Ensure no trailing space is added to className --- components/dash-core-components/src/components/Input.react.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js index 5bd9c1a0ca..60bbe99426 100644 --- a/components/dash-core-components/src/components/Input.react.js +++ b/components/dash-core-components/src/components/Input.react.js @@ -61,12 +61,14 @@ export default class Input extends PureComponent { const valprops = this.props.type === 'number' ? {} : {value: this.state.value}; const {loading_state} = this.props; + let {className} = this.props; + className = 'dash-input' + (className ? ` ${className}` : ''); return ( Date: Mon, 10 Jul 2023 11:00:55 -0600 Subject: [PATCH 04/10] Update CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64762f8dde..82d1e2949e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ This project adheres to [Semantic Versioning](https://semver.org/). ## Fixed -- [dash-embedded-component #83](https://github.com/plotly/dash-embedded-component/issues/83) CSS for input elements not scoped to Dash application +- [#2589](https://github.com/plotly/dash/pull/2589) CSS for input elements not scoped to Dash application ## [2.11.1] - 2023-06-29 From 3e6b531bbbe571df4519d012fea2e170a6bfd9a7 Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Wed, 12 Jul 2023 08:47:52 -0600 Subject: [PATCH 05/10] Exclude search element from html checks for now --- .../scripts/data/attributes.json | 37 ++++++------------- .../scripts/extract-elements.js | 5 ++- 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/components/dash-html-components/scripts/data/attributes.json b/components/dash-html-components/scripts/data/attributes.json index c83892449c..dfd9201323 100644 --- a/components/dash-html-components/scripts/data/attributes.json +++ b/components/dash-html-components/scripts/data/attributes.json @@ -54,15 +54,6 @@ ], "description": "Indicates whether controls in this form can by default have their values automatically completed by the browser." }, - "autoFocus": { - "elements": [ - "button", - "input", - "select", - "textarea" - ], - "description": "The element should be automatically focused after the page loaded." - }, "autoPlay": { "elements": [ "audio", @@ -760,7 +751,6 @@ "accept", "alt", "autoComplete", - "autoFocus", "capture", "checked", "disabled", @@ -848,7 +838,6 @@ ], "select": [ "autoComplete", - "autoFocus", "disabled", "form", "multiple", @@ -858,7 +847,6 @@ ], "textarea": [ "autoComplete", - "autoFocus", "cols", "disabled", "form", @@ -872,19 +860,6 @@ "rows", "wrap" ], - "button": [ - "autoFocus", - "disabled", - "form", - "formAction", - "formEncType", - "formMethod", - "formNoValidate", - "formTarget", - "name", - "type", - "value" - ], "audio": [ "autoPlay", "controls", @@ -967,6 +942,18 @@ "src", "srcLang" ], + "button": [ + "disabled", + "form", + "formAction", + "formEncType", + "formMethod", + "formNoValidate", + "formTarget", + "name", + "type", + "value" + ], "fieldset": [ "disabled", "form", diff --git a/components/dash-html-components/scripts/extract-elements.js b/components/dash-html-components/scripts/extract-elements.js index 5f3fc8a367..e790c85e25 100644 --- a/components/dash-html-components/scripts/extract-elements.js +++ b/components/dash-html-components/scripts/extract-elements.js @@ -13,7 +13,7 @@ const expectedElCount = 125; */ function extractElements($) { const excludeElements = [ - 'html', 'head', 'body', 'style', 'h1–h6', 'input', + 'html', 'head', 'body', 'style', 'h1–h6', 'input', 'search', // out of scope, different namespaces - but Mozilla added these to the // above reference page Jan 2021 so we need to exclude them now. // see https://github.com/mdn/content/pull/410 @@ -22,7 +22,8 @@ function extractElements($) { 'image', 'dir', 'tt', 'applet', 'noembed', 'bgsound', 'menu', 'menuitem', 'noframes', // experimental, don't add yet - 'portal' + 'portal', + 'search', ]; // `
` is for some reason missing from the reference tables. const addElements = [ From 1623592c3310fbe97a251e46ec6062c2b9852403 Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Wed, 12 Jul 2023 09:41:43 -0600 Subject: [PATCH 06/10] Remove duplicate key --- components/dash-html-components/scripts/extract-elements.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/dash-html-components/scripts/extract-elements.js b/components/dash-html-components/scripts/extract-elements.js index e790c85e25..f596c8cdbf 100644 --- a/components/dash-html-components/scripts/extract-elements.js +++ b/components/dash-html-components/scripts/extract-elements.js @@ -23,7 +23,6 @@ function extractElements($) { 'noframes', // experimental, don't add yet 'portal', - 'search', ]; // `
` is for some reason missing from the reference tables. const addElements = [ From 53bdf71f0575b907dff0638a7703cac1b515d6d0 Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Wed, 12 Jul 2023 11:17:48 -0600 Subject: [PATCH 07/10] Revert "Exclude search element from html checks for now" This reverts commit 3e6b531bbbe571df4519d012fea2e170a6bfd9a7. --- .../scripts/data/attributes.json | 37 +++++++++++++------ .../scripts/extract-elements.js | 2 +- 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/components/dash-html-components/scripts/data/attributes.json b/components/dash-html-components/scripts/data/attributes.json index dfd9201323..c83892449c 100644 --- a/components/dash-html-components/scripts/data/attributes.json +++ b/components/dash-html-components/scripts/data/attributes.json @@ -54,6 +54,15 @@ ], "description": "Indicates whether controls in this form can by default have their values automatically completed by the browser." }, + "autoFocus": { + "elements": [ + "button", + "input", + "select", + "textarea" + ], + "description": "The element should be automatically focused after the page loaded." + }, "autoPlay": { "elements": [ "audio", @@ -751,6 +760,7 @@ "accept", "alt", "autoComplete", + "autoFocus", "capture", "checked", "disabled", @@ -838,6 +848,7 @@ ], "select": [ "autoComplete", + "autoFocus", "disabled", "form", "multiple", @@ -847,6 +858,7 @@ ], "textarea": [ "autoComplete", + "autoFocus", "cols", "disabled", "form", @@ -860,6 +872,19 @@ "rows", "wrap" ], + "button": [ + "autoFocus", + "disabled", + "form", + "formAction", + "formEncType", + "formMethod", + "formNoValidate", + "formTarget", + "name", + "type", + "value" + ], "audio": [ "autoPlay", "controls", @@ -942,18 +967,6 @@ "src", "srcLang" ], - "button": [ - "disabled", - "form", - "formAction", - "formEncType", - "formMethod", - "formNoValidate", - "formTarget", - "name", - "type", - "value" - ], "fieldset": [ "disabled", "form", diff --git a/components/dash-html-components/scripts/extract-elements.js b/components/dash-html-components/scripts/extract-elements.js index f596c8cdbf..a9ce4f6b0d 100644 --- a/components/dash-html-components/scripts/extract-elements.js +++ b/components/dash-html-components/scripts/extract-elements.js @@ -22,7 +22,7 @@ function extractElements($) { 'image', 'dir', 'tt', 'applet', 'noembed', 'bgsound', 'menu', 'menuitem', 'noframes', // experimental, don't add yet - 'portal', + 'portal' ]; // `
` is for some reason missing from the reference tables. const addElements = [ From b156dc47b7db36649c3923ecda91543603d76d81 Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Wed, 12 Jul 2023 12:13:30 -0600 Subject: [PATCH 08/10] build From 11af8052ced05801e6481022d8683876602f8c07 Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Wed, 12 Jul 2023 15:33:45 -0600 Subject: [PATCH 09/10] build From ffcc9ebd79fddee6b28c789d9070769cdaf28566 Mon Sep 17 00:00:00 2001 From: Adrian Borrmann Date: Thu, 13 Jul 2023 09:37:23 -0600 Subject: [PATCH 10/10] build