Add class to Input elements so that CSS rules can be scoped

KoolADE85 · KoolADE85 · commit dd6ed5be43f1 · 2023-07-06T16:25:44.000-06:00
diff --git 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
@@ -66,13 +66,15 @@ 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}
                 onKeyPress={this.onKeyPress}
                 {...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
@@ -1,7 +1,7 @@
-input:invalid {
+input.dash-input:invalid {
     outline: solid red;
 }
 
-input:valid {
+input.dash-input:valid {
     outline: none black;
 }
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
@@ -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 = """
+    <html>
+        <body>
+            <input id="ExternalInput" required />
+            {%app_entry%}
+            {%config%}
+            {%scripts%}
+            {%renderer%}
+        </body>
+    </html>
+    """
+
+    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

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`		`-input:invalid {`
	`1`	`+input.dash-input:invalid {`
`2`	`2`	`outline: solid red;`
`3`	`3`	`}`
`4`	`4`
`5`		`-input:valid {`
	`5`	`+input.dash-input:valid {`
`6`	`6`	`outline: none black;`
`7`	`7`	`}`