Merge pull request #2589 from plotly/bugfix/dash-embedded-83

Bugfix: scope CSS of input elements
plotly · Jul 13, 2023 · 1718ec0 · 1718ec0
2 parents ce0aabe + ffcc9eb
commit 1718ec0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Fixed
 
+- [#2589](https://github.com/plotly/dash/pull/2589) CSS for input elements not scoped to Dash application
+
+## Changed
+
 - [#2593](https://github.com/plotly/dash/pull/2593) dcc.Input accepts a number for its debounce argument
 
 ## [2.11.1] - 2023-06-29

diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js
@@ -71,18 +71,22 @@ 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 (
             <input
                 data-dash-is-loading={
                     (loading_state && loading_state.is_loading) || undefined
                 }
+                className={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
@@ -72,3 +72,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.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")
+
+    assert external_outline_css != dash_outline_css