From 342126ab836fad4e82c8b652849ebe3f8be95bf5 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 30 Jun 2023 13:45:27 -0600
Subject: [PATCH 01/26] Add ability to debounce an input field by amount of
 time

---
 .../src/components/Input.react.js             | 48 ++++++++++++--
 .../tests/integration/input/conftest.py       | 65 +++++++++++++++++++
 .../tests/integration/input/test_debounce.py  | 57 ++++++++++++++++
 requires-all.txt                              |  2 +-
 4 files changed, 164 insertions(+), 8 deletions(-)
 create mode 100644 components/dash-core-components/tests/integration/input/test_debounce.py

diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js
index 18bf374a99..71435d4642 100644
--- a/components/dash-core-components/src/components/Input.react.js
+++ b/components/dash-core-components/src/components/Input.react.js
@@ -26,6 +26,7 @@ export default class Input extends PureComponent {
         this.onChange = this.onChange.bind(this);
         this.onEvent = this.onEvent.bind(this);
         this.onKeyPress = this.onKeyPress.bind(this);
+        this.debounceEvent = this.debounceEvent.bind(this);
         this.setInputValue = this.setInputValue.bind(this);
         this.setPropValue = this.setPropValue.bind(this);
     }
@@ -123,13 +124,30 @@ export default class Input extends PureComponent {
         }
     }
 
+    debounceEvent() {
+        const {value} = this.input.current;
+        let {debounce} = this.props;
+        debounce = Number.isFinite(debounce) ? debounce * 1000 : 500;
+
+        window.clearTimeout(this.state?.pendingEvent);
+        const pendingEvent = window.setTimeout(() => {
+            this.onEvent();
+        }, debounce);
+
+        this.setState({
+            ...this.state,
+            value,
+            pendingEvent,
+        });
+    }
+
     onBlur() {
         this.props.setProps({
             n_blur: this.props.n_blur + 1,
             n_blur_timestamp: Date.now(),
         });
         this.input.current.checkValidity();
-        return this.props.debounce && this.onEvent();
+        return this.props.debounce === true && this.onEvent();
     }
 
     onKeyPress(e) {
@@ -140,15 +158,29 @@ export default class Input extends PureComponent {
             });
             this.input.current.checkValidity();
         }
-        return this.props.debounce && e.key === 'Enter' && this.onEvent();
+        return this.props.debounce === true && e.key === 'Enter' && this.onEvent();
     }
 
     onChange() {
-        if (!this.props.debounce) {
+        if (this.props.debounce) {
+            if (this.props.type !== 'number') {
+                // this.setState({value: this.input.current.value});
+            }
+            if (typeof this.props.debounce === 'number') {
+                this.debounceEvent();
+            }
+        } else {
             this.onEvent();
-        } else if (this.props.type !== 'number') {
-            this.setState({value: this.input.current.value});
         }
+
+
+        // if (!this.props.debounce) {
+        //     this.onEvent();
+        // } else if (this.props.type !== 'number') {
+        //     this.setState({value: this.input.current.value});
+        // } else if (typeof this.props.debounce === 'number') {
+        //     this.debounceEvent();
+        // }
     }
 }
 
@@ -188,9 +220,11 @@ Input.propTypes = {
 
     /**
      * If true, changes to input will be sent back to the Dash server only on enter or when losing focus.
-     * If it's false, it will sent the value back on every change.
+     * If it's false, it will send the value back on every change.
+     * If a number, it will wait for the user to stop changing the input for that number of seconds before
+     * sending the value back
      */
-    debounce: PropTypes.bool,
+    debounce: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 
     /**
      * A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
diff --git a/components/dash-core-components/tests/integration/input/conftest.py b/components/dash-core-components/tests/integration/input/conftest.py
index f47858c444..ecbb2a1ca0 100644
--- a/components/dash-core-components/tests/integration/input/conftest.py
+++ b/components/dash-core-components/tests/integration/input/conftest.py
@@ -57,3 +57,68 @@ def range_out(val):
         return val
 
     yield app
+
+@pytest.fixture(scope="module")
+def debounce_text_app():
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Input(
+                id="input-slow",
+                debounce=3,
+                placeholder="long wait",
+            ),
+            html.Div(id="div-slow"),
+
+            dcc.Input(
+                id="input-fast",
+                debounce=0.25,
+                placeholder="short wait",
+            ),
+            html.Div(id="div-fast"),
+        ]
+    )
+
+    @app.callback(
+        [Output("div-slow", "children"), Output("div-fast", "children")],
+        [Input("input-slow", "value"), Input("input-fast", "value")],
+    )
+    def render(slow_val, fast_val):
+        return [slow_val, fast_val]
+
+    yield app
+
+@pytest.fixture(scope="module")
+def debounce_number_app():
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Input(
+                id="input-slow",
+                debounce=3,
+                type="number",
+                placeholder="long wait",
+            ),
+            html.Div(id="div-slow"),
+
+            dcc.Input(
+                id="input-fast",
+                debounce=0.25,
+                type="number",
+                min=10,
+                max=10000,
+                step=3,
+                placeholder="short wait",
+            ),
+            html.Div(id="div-fast"),
+        ]
+    )
+
+    @app.callback(
+        [Output("div-slow", "children"), Output("div-fast", "children")],
+        [Input("input-slow", "value"), Input("input-fast", "value")],
+    )
+    def render(slow_val, fast_val):
+        return [slow_val, fast_val]
+
+    yield app
diff --git a/components/dash-core-components/tests/integration/input/test_debounce.py b/components/dash-core-components/tests/integration/input/test_debounce.py
new file mode 100644
index 0000000000..c47741dff4
--- /dev/null
+++ b/components/dash-core-components/tests/integration/input/test_debounce.py
@@ -0,0 +1,57 @@
+from selenium.common import TimeoutException
+from selenium.webdriver.support.wait import WebDriverWait
+from selenium.webdriver.common.by import By
+import pytest
+
+def test_debounce_text_by_time(dash_dcc, debounce_text_app):
+    dash_dcc.start_server(debounce_text_app)
+
+    # expect that a long debounce does not call back in a short amount of time
+    elem = dash_dcc.find_element("#input-slow")
+    elem.send_keys('unit test slow')
+    with pytest.raises(TimeoutException):
+        WebDriverWait(dash_dcc.driver, timeout=1).until(
+            lambda d: d.find_element(By.XPATH, "//*[text()='unit test slow']")
+        )
+
+    # but do expect that it is eventually called
+    assert dash_dcc.wait_for_text_to_equal(
+        "#div-slow", "unit test slow"
+    ), "long debounce is eventually called back"
+
+
+    # expect that a short debounce calls back within a short amount of time
+    elem = dash_dcc.find_element("#input-fast")
+    elem.send_keys('unit test fast')
+    WebDriverWait(dash_dcc.driver, timeout=1).until(
+        lambda d: d.find_element(By.XPATH, "//*[text()='unit test fast']")
+    )
+
+    assert dash_dcc.get_logs() == []
+
+
+def test_debounce_number_by_time(dash_dcc, debounce_number_app):
+    dash_dcc.start_server(debounce_number_app)
+
+    # expect that a long debounce does not call back in a short amount of time
+    elem = dash_dcc.find_element("#input-slow")
+    elem.send_keys('12345')
+    with pytest.raises(TimeoutException):
+        WebDriverWait(dash_dcc.driver, timeout=1).until(
+            lambda d: d.find_element(By.XPATH, "//*[text()='12345']")
+        )
+
+    # but do expect that it is eventually called
+    assert dash_dcc.wait_for_text_to_equal(
+        "#div-slow", "12345"
+    ), "long debounce is eventually called back"
+
+
+    # expect that a short debounce calls back within a short amount of time
+    elem = dash_dcc.find_element("#input-fast")
+    elem.send_keys('67890')
+    WebDriverWait(dash_dcc.driver, timeout=1).until(
+        lambda d: d.find_element(By.XPATH, "//*[text()='67890']")
+    )
+
+    assert dash_dcc.get_logs() == []
diff --git a/requires-all.txt b/requires-all.txt
index 92b8e8cedf..9e376d465a 100644
--- a/requires-all.txt
+++ b/requires-all.txt
@@ -2,7 +2,7 @@
 redis>=3.5.3
 celery[redis]>=5.1.2
 # Dependencies used by CI on github.com/plotly/dash
-black==21.6b0
+black==22.3.0
 dash-flow-example==0.0.5
 dash-dangerously-set-inner-html
 flake8==3.9.2

From dd6ed5be43f1718be06c3d26f1dd967c75a8cfff Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Thu, 6 Jul 2023 15:28:12 -0600
Subject: [PATCH 02/26] 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 = """
+    <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

From 745f0f31d393eff9a4991da5ffd60e6f0cfb6f6d Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Fri, 7 Jul 2023 09:17:49 -0600
Subject: [PATCH 03/26] 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 <hello@adrianborrmann.com>
Date: Mon, 10 Jul 2023 07:55:10 -0600
Subject: [PATCH 04/26] 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 (
             <input
                 data-dash-is-loading={
                     (loading_state && loading_state.is_loading) || undefined
                 }
-                className={['dash-input', this.props.className].join(' ')}
+                className={className}
                 ref={this.input}
                 onBlur={this.onBlur}
                 onChange={this.onChange}

From c2f4ef952d7777f9bcbdf023342f14d69f898e81 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Mon, 10 Jul 2023 07:30:29 -0600
Subject: [PATCH 05/26] Do not accept incoming props for input value during
 debounce periods

---
 .../src/components/Input.react.js             | 41 +++++++++----------
 .../tests/integration/input/conftest.py       |  4 +-
 .../tests/integration/input/test_debounce.py  | 11 +++--
 .../integration/devtools/test_props_check.py  |  2 +-
 4 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js
index 71435d4642..45768b9024 100644
--- a/components/dash-core-components/src/components/Input.react.js
+++ b/components/dash-core-components/src/components/Input.react.js
@@ -33,6 +33,10 @@ export default class Input extends PureComponent {
 
     UNSAFE_componentWillReceiveProps(nextProps) {
         const {value} = this.input.current;
+        if (this.state?.pendingEvent && nextProps.value !== value) {
+            // avoid updating the input while awaiting a debounced event
+            return;
+        }
         const valueAsNumber = convert(value);
         this.setInputValue(
             isNil(valueAsNumber) ? value : valueAsNumber,
@@ -124,18 +128,17 @@ export default class Input extends PureComponent {
         }
     }
 
-    debounceEvent() {
+    debounceEvent(time = 0.5) {
         const {value} = this.input.current;
-        let {debounce} = this.props;
-        debounce = Number.isFinite(debounce) ? debounce * 1000 : 500;
+        const MILLISECONDS = 1000;
+        time = time * MILLISECONDS;
 
         window.clearTimeout(this.state?.pendingEvent);
         const pendingEvent = window.setTimeout(() => {
             this.onEvent();
-        }, debounce);
+        }, time);
 
         this.setState({
-            ...this.state,
             value,
             pendingEvent,
         });
@@ -158,29 +161,23 @@ export default class Input extends PureComponent {
             });
             this.input.current.checkValidity();
         }
-        return this.props.debounce === true && e.key === 'Enter' && this.onEvent();
+        return (
+            this.props.debounce === true && e.key === 'Enter' && this.onEvent()
+        );
     }
 
     onChange() {
-        if (this.props.debounce) {
-            if (this.props.type !== 'number') {
-                // this.setState({value: this.input.current.value});
+        const {debounce} = this.props;
+        if (debounce) {
+            if (Number.isFinite(debounce)) {
+                this.debounceEvent(debounce);
             }
-            if (typeof this.props.debounce === 'number') {
-                this.debounceEvent();
+            if (this.props.type !== 'number') {
+                this.setState({value: this.input.current.value});
             }
         } else {
             this.onEvent();
         }
-
-
-        // if (!this.props.debounce) {
-        //     this.onEvent();
-        // } else if (this.props.type !== 'number') {
-        //     this.setState({value: this.input.current.value});
-        // } else if (typeof this.props.debounce === 'number') {
-        //     this.debounceEvent();
-        // }
     }
 }
 
@@ -221,8 +218,8 @@ Input.propTypes = {
     /**
      * If true, changes to input will be sent back to the Dash server only on enter or when losing focus.
      * If it's false, it will send the value back on every change.
-     * If a number, it will wait for the user to stop changing the input for that number of seconds before
-     * sending the value back
+     * If a number, it will not send anything back to the Dash server until the user has stopped
+     * typing for that number of seconds.
      */
     debounce: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 
diff --git a/components/dash-core-components/tests/integration/input/conftest.py b/components/dash-core-components/tests/integration/input/conftest.py
index ecbb2a1ca0..c03087db1a 100644
--- a/components/dash-core-components/tests/integration/input/conftest.py
+++ b/components/dash-core-components/tests/integration/input/conftest.py
@@ -58,6 +58,7 @@ def range_out(val):
 
     yield app
 
+
 @pytest.fixture(scope="module")
 def debounce_text_app():
     app = Dash(__name__)
@@ -69,7 +70,6 @@ def debounce_text_app():
                 placeholder="long wait",
             ),
             html.Div(id="div-slow"),
-
             dcc.Input(
                 id="input-fast",
                 debounce=0.25,
@@ -88,6 +88,7 @@ def render(slow_val, fast_val):
 
     yield app
 
+
 @pytest.fixture(scope="module")
 def debounce_number_app():
     app = Dash(__name__)
@@ -100,7 +101,6 @@ def debounce_number_app():
                 placeholder="long wait",
             ),
             html.Div(id="div-slow"),
-
             dcc.Input(
                 id="input-fast",
                 debounce=0.25,
diff --git a/components/dash-core-components/tests/integration/input/test_debounce.py b/components/dash-core-components/tests/integration/input/test_debounce.py
index c47741dff4..ff28c53613 100644
--- a/components/dash-core-components/tests/integration/input/test_debounce.py
+++ b/components/dash-core-components/tests/integration/input/test_debounce.py
@@ -3,12 +3,13 @@
 from selenium.webdriver.common.by import By
 import pytest
 
+
 def test_debounce_text_by_time(dash_dcc, debounce_text_app):
     dash_dcc.start_server(debounce_text_app)
 
     # expect that a long debounce does not call back in a short amount of time
     elem = dash_dcc.find_element("#input-slow")
-    elem.send_keys('unit test slow')
+    elem.send_keys("unit test slow")
     with pytest.raises(TimeoutException):
         WebDriverWait(dash_dcc.driver, timeout=1).until(
             lambda d: d.find_element(By.XPATH, "//*[text()='unit test slow']")
@@ -19,10 +20,9 @@ def test_debounce_text_by_time(dash_dcc, debounce_text_app):
         "#div-slow", "unit test slow"
     ), "long debounce is eventually called back"
 
-
     # expect that a short debounce calls back within a short amount of time
     elem = dash_dcc.find_element("#input-fast")
-    elem.send_keys('unit test fast')
+    elem.send_keys("unit test fast")
     WebDriverWait(dash_dcc.driver, timeout=1).until(
         lambda d: d.find_element(By.XPATH, "//*[text()='unit test fast']")
     )
@@ -35,7 +35,7 @@ def test_debounce_number_by_time(dash_dcc, debounce_number_app):
 
     # expect that a long debounce does not call back in a short amount of time
     elem = dash_dcc.find_element("#input-slow")
-    elem.send_keys('12345')
+    elem.send_keys("12345")
     with pytest.raises(TimeoutException):
         WebDriverWait(dash_dcc.driver, timeout=1).until(
             lambda d: d.find_element(By.XPATH, "//*[text()='12345']")
@@ -46,10 +46,9 @@ def test_debounce_number_by_time(dash_dcc, debounce_number_app):
         "#div-slow", "12345"
     ), "long debounce is eventually called back"
 
-
     # expect that a short debounce calls back within a short amount of time
     elem = dash_dcc.find_element("#input-fast")
-    elem.send_keys('67890')
+    elem.send_keys("67890")
     WebDriverWait(dash_dcc.driver, timeout=1).until(
         lambda d: d.find_element(By.XPATH, "//*[text()='67890']")
     )
diff --git a/tests/integration/devtools/test_props_check.py b/tests/integration/devtools/test_props_check.py
index ef41e1f8d3..95f9af7edc 100644
--- a/tests/integration/devtools/test_props_check.py
+++ b/tests/integration/devtools/test_props_check.py
@@ -7,7 +7,7 @@
         "fail": True,
         "name": 'simple "not a boolean" check',
         "component": dcc.Input,
-        "props": {"debounce": 0},
+        "props": {"multiple": 0},
     },
     "missing-required-nested-prop": {
         "fail": True,

From fe7a8e601d814b05792696f60a4f9098159aeae1 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Mon, 10 Jul 2023 10:24:00 -0600
Subject: [PATCH 06/26] Make sure to reset debounce state after timeout

---
 components/dash-core-components/src/components/Input.react.js | 3 ++-
 1 file changed, 2 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 45768b9024..b385b8e931 100644
--- a/components/dash-core-components/src/components/Input.react.js
+++ b/components/dash-core-components/src/components/Input.react.js
@@ -33,7 +33,7 @@ export default class Input extends PureComponent {
 
     UNSAFE_componentWillReceiveProps(nextProps) {
         const {value} = this.input.current;
-        if (this.state?.pendingEvent && nextProps.value !== value) {
+        if (this.state?.pendingEvent) {
             // avoid updating the input while awaiting a debounced event
             return;
         }
@@ -126,6 +126,7 @@ export default class Input extends PureComponent {
         } else {
             this.props.setProps({value});
         }
+        this.setState({pendingEvent: undefined});
     }
 
     debounceEvent(time = 0.5) {

From 494e23d3bdf96667e2f61a2777427fd80c404824 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Mon, 10 Jul 2023 11:00:55 -0600
Subject: [PATCH 07/26] 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 259b63a4c7eae929feddd16667143e58961e35f4 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Mon, 10 Jul 2023 14:47:14 -0600
Subject: [PATCH 08/26] Update selenium import for older python compatibility

---
 .../tests/integration/input/test_debounce.py                | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/dash-core-components/tests/integration/input/test_debounce.py b/components/dash-core-components/tests/integration/input/test_debounce.py
index ff28c53613..e68f90574e 100644
--- a/components/dash-core-components/tests/integration/input/test_debounce.py
+++ b/components/dash-core-components/tests/integration/input/test_debounce.py
@@ -1,4 +1,4 @@
-from selenium.common import TimeoutException
+from selenium.common.exceptions import TimeoutException
 from selenium.webdriver.support.wait import WebDriverWait
 from selenium.webdriver.common.by import By
 import pytest
@@ -48,9 +48,9 @@ def test_debounce_number_by_time(dash_dcc, debounce_number_app):
 
     # expect that a short debounce calls back within a short amount of time
     elem = dash_dcc.find_element("#input-fast")
-    elem.send_keys("67890")
+    elem.send_keys("10000")
     WebDriverWait(dash_dcc.driver, timeout=1).until(
-        lambda d: d.find_element(By.XPATH, "//*[text()='67890']")
+        lambda d: d.find_element(By.XPATH, "//*[text()='10000']")
     )
 
     assert dash_dcc.get_logs() == []

From 0198e2070e7cbf45d0173ffff7a6e885a2caf06e Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Mon, 10 Jul 2023 16:22:28 -0600
Subject: [PATCH 09/26] Define input state in constructor

---
 .../dash-core-components/src/components/Input.react.js     | 7 ++++++-
 1 file changed, 6 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 b385b8e931..94f076206b 100644
--- a/components/dash-core-components/src/components/Input.react.js
+++ b/components/dash-core-components/src/components/Input.react.js
@@ -20,6 +20,11 @@ export default class Input extends PureComponent {
     constructor(props) {
         super(props);
 
+        this.state = {
+            pendingEvent: undefined,
+            value: '',
+        };
+
         this.input = React.createRef();
 
         this.onBlur = this.onBlur.bind(this);
@@ -33,7 +38,7 @@ export default class Input extends PureComponent {
 
     UNSAFE_componentWillReceiveProps(nextProps) {
         const {value} = this.input.current;
-        if (this.state?.pendingEvent) {
+        if (this.state.pendingEvent) {
             // avoid updating the input while awaiting a debounced event
             return;
         }

From e5cfa57b34905dbed40b4fe49b2c41fded9b7b40 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Wed, 12 Jul 2023 08:41:54 -0600
Subject: [PATCH 10/26] Address code review feedback

---
 CHANGELOG.md                                                | 6 ++++++
 components/dash-core-components/.eslintrc                   | 2 +-
 .../dash-core-components/src/components/Input.react.js      | 6 ++----
 .../tests/integration/input/test_debounce.py                | 4 ++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc8caf8c7f..4f1968d779 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
+
+- [#2593](https://github.com/plotly/dash/pull/2593) dcc.Input accepts a number for its debounce argument
+
 ## [2.11.1] - 2023-06-29
 
 ## Fixed
diff --git a/components/dash-core-components/.eslintrc b/components/dash-core-components/.eslintrc
index 85388405b3..7d73d3670a 100644
--- a/components/dash-core-components/.eslintrc
+++ b/components/dash-core-components/.eslintrc
@@ -117,7 +117,7 @@
     }],
     "no-magic-numbers": ["error", {
       "ignoreArrayIndexes": true,
-      "ignore": [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 100, 10, 16, 0.5, 25]
+      "ignore": [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 100, 10, 16, 0.5, 25, 1000]
     }],
     "no-underscore-dangle": ["off"],
     "no-useless-escape": ["off"]
diff --git a/components/dash-core-components/src/components/Input.react.js b/components/dash-core-components/src/components/Input.react.js
index 94f076206b..6f362215e3 100644
--- a/components/dash-core-components/src/components/Input.react.js
+++ b/components/dash-core-components/src/components/Input.react.js
@@ -134,15 +134,13 @@ export default class Input extends PureComponent {
         this.setState({pendingEvent: undefined});
     }
 
-    debounceEvent(time = 0.5) {
+    debounceEvent(seconds = 0.5) {
         const {value} = this.input.current;
-        const MILLISECONDS = 1000;
-        time = time * MILLISECONDS;
 
         window.clearTimeout(this.state?.pendingEvent);
         const pendingEvent = window.setTimeout(() => {
             this.onEvent();
-        }, time);
+        }, seconds * 1000);
 
         this.setState({
             value,
diff --git a/components/dash-core-components/tests/integration/input/test_debounce.py b/components/dash-core-components/tests/integration/input/test_debounce.py
index e68f90574e..516195eeb2 100644
--- a/components/dash-core-components/tests/integration/input/test_debounce.py
+++ b/components/dash-core-components/tests/integration/input/test_debounce.py
@@ -16,7 +16,7 @@ def test_debounce_text_by_time(dash_dcc, debounce_text_app):
         )
 
     # but do expect that it is eventually called
-    assert dash_dcc.wait_for_text_to_equal(
+    dash_dcc.wait_for_text_to_equal(
         "#div-slow", "unit test slow"
     ), "long debounce is eventually called back"
 
@@ -42,7 +42,7 @@ def test_debounce_number_by_time(dash_dcc, debounce_number_app):
         )
 
     # but do expect that it is eventually called
-    assert dash_dcc.wait_for_text_to_equal(
+    dash_dcc.wait_for_text_to_equal(
         "#div-slow", "12345"
     ), "long debounce is eventually called back"
 

From 3e6b531bbbe571df4519d012fea2e170a6bfd9a7 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Wed, 12 Jul 2023 08:47:52 -0600
Subject: [PATCH 11/26] 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',
     ];
     // `<section>` is for some reason missing from the reference tables.
     const addElements = [

From 1623592c3310fbe97a251e46ec6062c2b9852403 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Wed, 12 Jul 2023 09:41:43 -0600
Subject: [PATCH 12/26] 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',
     ];
     // `<section>` is for some reason missing from the reference tables.
     const addElements = [

From 53bdf71f0575b907dff0638a7703cac1b515d6d0 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Wed, 12 Jul 2023 11:17:48 -0600
Subject: [PATCH 13/26] 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'
     ];
     // `<section>` is for some reason missing from the reference tables.
     const addElements = [

From b156dc47b7db36649c3923ecda91543603d76d81 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Wed, 12 Jul 2023 12:13:30 -0600
Subject: [PATCH 14/26] build


From 1691007f465481510deb35bd75341bcc9f9671d8 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Wed, 12 Jul 2023 14:09:48 -0600
Subject: [PATCH 15/26] fix build error

---
 components/dash-html-components/scripts/extract-elements.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dash-html-components/scripts/extract-elements.js b/components/dash-html-components/scripts/extract-elements.js
index 5f3fc8a367..a9ce4f6b0d 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

From 11af8052ced05801e6481022d8683876602f8c07 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Wed, 12 Jul 2023 15:33:45 -0600
Subject: [PATCH 16/26] build


From d13a9179ae196578fd644e09cb3127f59f55078c Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Thu, 13 Jul 2023 09:58:44 -0400
Subject: [PATCH 17/26] Create a single cancel callback for each unique input.

---
 dash/_callback.py | 20 +-------------------
 dash/dash.py      | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/dash/_callback.py b/dash/_callback.py
index 82102aac95..ed2db1a210 100644
--- a/dash/_callback.py
+++ b/dash/_callback.py
@@ -12,7 +12,6 @@
 from .exceptions import (
     PreventUpdate,
     WildcardInLongCallback,
-    DuplicateCallback,
     MissingLongCallbackManagerError,
     LongCallbackError,
 )
@@ -171,25 +170,8 @@ def callback(
             cancel_inputs = coerce_to_list(cancel)
             validate_long_inputs(cancel_inputs)
 
-            cancels_output = [Output(c.component_id, "id") for c in cancel_inputs]
-
-            try:
-
-                @callback(cancels_output, cancel_inputs, prevent_initial_call=True)
-                def cancel_call(*_):
-                    job_ids = flask.request.args.getlist("cancelJob")
-                    executor = (
-                        manager or context_value.get().background_callback_manager
-                    )
-                    if job_ids:
-                        for job_id in job_ids:
-                            executor.terminate_job(job_id)
-                    return NoUpdate()
-
-            except DuplicateCallback:
-                pass  # Already a callback to cancel, will get the proper jobs from the store.
-
             long_spec["cancel"] = [c.to_dict() for c in cancel_inputs]
+            long_spec["cancel_inputs"] = cancel_inputs
 
         if cache_args_to_ignore:
             long_spec["cache_args_to_ignore"] = cache_args_to_ignore
diff --git a/dash/dash.py b/dash/dash.py
index 64b2a1ea02..f6e46ac8f5 100644
--- a/dash/dash.py
+++ b/dash/dash.py
@@ -1316,6 +1316,30 @@ def _setup_server(self):
 
         _validate.validate_long_callbacks(self.callback_map)
 
+        cancels = set()
+
+        for callback in self.callback_map.values():
+            cancel = callback.get("long", {}).pop("cancel_inputs")
+            if cancel:
+                cancels.update(cancel)
+
+        if cancels:
+            for cancel_input in cancels:
+
+                # pylint: disable=cell-var-from-loop
+                @self.callback(
+                    Output(cancel_input.component_id, "id"),
+                    cancel_input,
+                    prevent_initial_call=True,
+                )
+                def cancel_call(*_):
+                    job_ids = flask.request.args.getlist("cancelJob")
+                    executor = _callback.context_value.get().background_callback_manager
+                    if job_ids:
+                        for job_id in job_ids:
+                            executor.terminate_job(job_id)
+                    return no_update
+
     def _add_assets_resource(self, url_path, file_path):
         res = {"asset_path": url_path, "filepath": file_path}
         if self.config.assets_external_path:

From ffcc9ebd79fddee6b28c789d9070769cdaf28566 Mon Sep 17 00:00:00 2001
From: Adrian Borrmann <hello@adrianborrmann.com>
Date: Thu, 13 Jul 2023 09:37:23 -0600
Subject: [PATCH 18/26] build


From b5c12871a2c706c3507e2350606d9473091f84d9 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Thu, 13 Jul 2023 12:19:59 -0400
Subject: [PATCH 19/26] Fix cancel with manager from parameter.

---
 dash/_callback.py |  5 +++++
 dash/dash.py      | 20 ++++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/dash/_callback.py b/dash/_callback.py
index ed2db1a210..836b2104d2 100644
--- a/dash/_callback.py
+++ b/dash/_callback.py
@@ -183,6 +183,7 @@ def callback(
         *_args,
         **_kwargs,
         long=long_spec,
+        manager=manager,
     )
 
 
@@ -220,6 +221,7 @@ def insert_callback(
     inputs_state_indices,
     prevent_initial_call,
     long=None,
+    manager=None,
 ):
     if prevent_initial_call is None:
         prevent_initial_call = config_prevent_initial_callbacks
@@ -251,6 +253,7 @@ def insert_callback(
         "long": long,
         "output": output,
         "raw_inputs": inputs,
+        "manager": manager,
     }
     callback_list.append(callback_spec)
 
@@ -278,6 +281,7 @@ def register_callback(  # pylint: disable=R0914
         multi = True
 
     long = _kwargs.get("long")
+    manager = _kwargs.get("manager")
 
     output_indices = make_grouping_by_index(output, list(range(grouping_len(output))))
     callback_id = insert_callback(
@@ -291,6 +295,7 @@ def register_callback(  # pylint: disable=R0914
         inputs_state_indices,
         prevent_initial_call,
         long=long,
+        manager=manager,
     )
 
     # pylint: disable=too-many-locals
diff --git a/dash/dash.py b/dash/dash.py
index f6e46ac8f5..6e7a1d2e5d 100644
--- a/dash/dash.py
+++ b/dash/dash.py
@@ -1194,9 +1194,6 @@ def dispatch(self):
             input_values
         ) = inputs_to_dict(inputs)
         g.state_values = inputs_to_dict(state)  # pylint: disable=assigning-non-slot
-        g.background_callback_manager = (
-            self._background_manager
-        )  # pylint: disable=E0237
         changed_props = body.get("changedPropIds", [])
         g.triggered_inputs = [  # pylint: disable=assigning-non-slot
             {"prop_id": x, "value": input_values.get(x)} for x in changed_props
@@ -1211,7 +1208,9 @@ def dispatch(self):
         try:
             cb = self.callback_map[output]
             func = cb["callback"]
-
+            g.background_callback_manager = (
+                cb.get("manager") or self._background_manager
+            )
             g.ignore_register_page = cb.get("long", False)
 
             # Add args_grouping
@@ -1316,21 +1315,26 @@ def _setup_server(self):
 
         _validate.validate_long_callbacks(self.callback_map)
 
-        cancels = set()
+        cancels = {}
 
         for callback in self.callback_map.values():
-            cancel = callback.get("long", {}).pop("cancel_inputs")
+            long = callback.get("long")
+            if not long:
+                continue
+            cancel = long.pop("cancel_inputs")
             if cancel:
-                cancels.update(cancel)
+                for c in cancel:
+                    cancels[c] = long.get("manager")
 
         if cancels:
-            for cancel_input in cancels:
+            for cancel_input, manager in cancels.items():
 
                 # pylint: disable=cell-var-from-loop
                 @self.callback(
                     Output(cancel_input.component_id, "id"),
                     cancel_input,
                     prevent_initial_call=True,
+                    manager=manager,
                 )
                 def cancel_call(*_):
                     job_ids = flask.request.args.getlist("cancelJob")

From b9a07a02079bd03a99bb983f3830aadfc24f2346 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Thu, 13 Jul 2023 12:34:32 -0400
Subject: [PATCH 20/26] Add test page cancel.

---
 .../long_callback/app_page_cancel.py          | 93 +++++++++++++++++++
 .../long_callback/test_basic_long_callback.py | 34 +++++++
 2 files changed, 127 insertions(+)
 create mode 100644 tests/integration/long_callback/app_page_cancel.py

diff --git a/tests/integration/long_callback/app_page_cancel.py b/tests/integration/long_callback/app_page_cancel.py
new file mode 100644
index 0000000000..9716d44893
--- /dev/null
+++ b/tests/integration/long_callback/app_page_cancel.py
@@ -0,0 +1,93 @@
+from dash import Dash, Input, Output, dcc, html, page_container, register_page
+
+import time
+
+from tests.integration.long_callback.utils import get_long_callback_manager
+
+long_callback_manager = get_long_callback_manager()
+handle = long_callback_manager.handle
+
+
+app = Dash(
+    __name__,
+    use_pages=True,
+    pages_folder="",
+    long_callback_manager=long_callback_manager,
+)
+
+app.layout = html.Div(
+    [
+        dcc.Link("page1", "/"),
+        dcc.Link("page2", "/2"),
+        html.Button("Cancel", id="cancel"),
+        page_container,
+    ]
+)
+
+
+register_page(
+    "one",
+    "/",
+    layout=html.Div(
+        [
+            html.Button("start", id="start1"),
+            html.Button("cancel1", id="cancel1"),
+            html.Div("idle", id="progress1"),
+            html.Div("initial", id="output1"),
+        ]
+    ),
+)
+register_page(
+    "two",
+    "/2",
+    layout=html.Div(
+        [
+            html.Button("start2", id="start2"),
+            html.Button("cancel2", id="cancel2"),
+            html.Div("idle", id="progress2"),
+            html.Div("initial", id="output2"),
+        ]
+    ),
+)
+
+
+@app.callback(
+    Output("output1", "children"),
+    Input("start1", "n_clicks"),
+    running=[
+        (Output("progress1", "children"), "running", "idle"),
+    ],
+    cancel=[
+        Input("cancel1", "n_clicks"),
+        Input("cancel", "n_clicks"),
+    ],
+    background=True,
+    prevent_initial_call=True,
+    interval=300,
+)
+def on_click1(n_clicks):
+    time.sleep(2)
+    return f"Click {n_clicks}"
+
+
+@app.callback(
+    Output("output2", "children"),
+    Input("start2", "n_clicks"),
+    running=[
+        (Output("progress2", "children"), "running", "idle"),
+    ],
+    cancel=[
+        Input("cancel2", "n_clicks"),
+        Input("cancel", "n_clicks"),
+    ],
+    background=True,
+    prevent_initial_call=True,
+    interval=300,
+)
+def on_click1(n_clicks):
+    time.sleep(2)
+    return f"Click {n_clicks}"
+
+
+if __name__ == "__main__":
+    app.run(debug=True)
diff --git a/tests/integration/long_callback/test_basic_long_callback.py b/tests/integration/long_callback/test_basic_long_callback.py
index 93cc56c04d..47cf27fe17 100644
--- a/tests/integration/long_callback/test_basic_long_callback.py
+++ b/tests/integration/long_callback/test_basic_long_callback.py
@@ -556,3 +556,37 @@ def test_lcbc015_diff_outputs_same_func(dash_duo, manager):
         for i in range(1, 3):
             dash_duo.find_element(f"#button-{i}").click()
             dash_duo.wait_for_text_to_equal(f"#output-{i}", f"Clicked on {i}")
+
+
+def test_lcbc016_multi_page_cancel(dash_duo, manager):
+    with setup_long_callback_app(manager, "app_page_cancel") as app:
+        dash_duo.start_server(app)
+        dash_duo.find_element("#start1").click()
+        dash_duo.wait_for_text_to_equal("#progress1", "running")
+        dash_duo.find_element("#cancel").click()
+        dash_duo.wait_for_text_to_equal("#progress1", "idle")
+        time.sleep(2.1)
+        dash_duo.wait_for_text_to_equal("#output1", "initial")
+
+        dash_duo.find_element("#start1").click()
+        dash_duo.wait_for_text_to_equal("#progress1", "running")
+        dash_duo.find_element("#cancel1").click()
+        dash_duo.wait_for_text_to_equal("#progress1", "idle")
+        time.sleep(2.1)
+        dash_duo.wait_for_text_to_equal("#output1", "initial")
+
+        dash_duo.server_url = dash_duo.server_url + "/2"
+
+        dash_duo.find_element("#start2").click()
+        dash_duo.wait_for_text_to_equal("#progress2", "running")
+        dash_duo.find_element("#cancel").click()
+        dash_duo.wait_for_text_to_equal("#progress2", "idle")
+        time.sleep(2.1)
+        dash_duo.wait_for_text_to_equal("#output2", "initial")
+
+        dash_duo.find_element("#start2").click()
+        dash_duo.wait_for_text_to_equal("#progress2", "running")
+        dash_duo.find_element("#cancel2").click()
+        dash_duo.wait_for_text_to_equal("#progress2", "idle")
+        time.sleep(2.1)
+        dash_duo.wait_for_text_to_equal("#output2", "initial")

From 050b85eea0c730a89d5e3d817957f662eb3be1ef Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Thu, 13 Jul 2023 15:25:59 -0400
Subject: [PATCH 21/26] Fix cancel tests.

---
 tests/integration/long_callback/test_basic_long_callback.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tests/integration/long_callback/test_basic_long_callback.py b/tests/integration/long_callback/test_basic_long_callback.py
index 47cf27fe17..9eb6ec8d40 100644
--- a/tests/integration/long_callback/test_basic_long_callback.py
+++ b/tests/integration/long_callback/test_basic_long_callback.py
@@ -63,6 +63,9 @@ def setup_long_callback_app(manager_name, app_name):
             ],
             preexec_fn=os.setpgrp,
         )
+        # Wait for the worker to be ready, if you cancel before it is ready, the job
+        # will still be queued.
+        time.sleep(1)
         try:
             yield import_app(f"tests.integration.long_callback.{app_name}")
         finally:

From 3466998e648baf4637f816b5e58bfa0c3a337000 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Fri, 14 Jul 2023 10:40:55 -0400
Subject: [PATCH 22/26] Wait for worker to be ready.

---
 tests/integration/long_callback/test_basic_long_callback.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/tests/integration/long_callback/test_basic_long_callback.py b/tests/integration/long_callback/test_basic_long_callback.py
index 9eb6ec8d40..ff4520fd9b 100644
--- a/tests/integration/long_callback/test_basic_long_callback.py
+++ b/tests/integration/long_callback/test_basic_long_callback.py
@@ -62,10 +62,14 @@ def setup_long_callback_app(manager_name, app_name):
                 "--loglevel=info",
             ],
             preexec_fn=os.setpgrp,
+            stderr=subprocess.PIPE,
         )
         # Wait for the worker to be ready, if you cancel before it is ready, the job
         # will still be queued.
-        time.sleep(1)
+        for line in iter(worker.stderr.readline, ""):
+            if "ready" in line.decode():
+                break
+
         try:
             yield import_app(f"tests.integration.long_callback.{app_name}")
         finally:

From bc38c137c106ac7ed5930eb940f680f97d6b5efd Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Tue, 18 Jul 2023 11:22:03 -0400
Subject: [PATCH 23/26] Rename cancel -> shared_cancel

---
 tests/integration/long_callback/app_page_cancel.py          | 6 +++---
 tests/integration/long_callback/test_basic_long_callback.py | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/tests/integration/long_callback/app_page_cancel.py b/tests/integration/long_callback/app_page_cancel.py
index 9716d44893..7ea1adebf8 100644
--- a/tests/integration/long_callback/app_page_cancel.py
+++ b/tests/integration/long_callback/app_page_cancel.py
@@ -19,7 +19,7 @@
     [
         dcc.Link("page1", "/"),
         dcc.Link("page2", "/2"),
-        html.Button("Cancel", id="cancel"),
+        html.Button("Cancel", id="shared_cancel"),
         page_container,
     ]
 )
@@ -59,7 +59,7 @@
     ],
     cancel=[
         Input("cancel1", "n_clicks"),
-        Input("cancel", "n_clicks"),
+        Input("shared_cancel", "n_clicks"),
     ],
     background=True,
     prevent_initial_call=True,
@@ -78,7 +78,7 @@ def on_click1(n_clicks):
     ],
     cancel=[
         Input("cancel2", "n_clicks"),
-        Input("cancel", "n_clicks"),
+        Input("shared_cancel", "n_clicks"),
     ],
     background=True,
     prevent_initial_call=True,
diff --git a/tests/integration/long_callback/test_basic_long_callback.py b/tests/integration/long_callback/test_basic_long_callback.py
index ff4520fd9b..fc19d3c0af 100644
--- a/tests/integration/long_callback/test_basic_long_callback.py
+++ b/tests/integration/long_callback/test_basic_long_callback.py
@@ -570,7 +570,7 @@ def test_lcbc016_multi_page_cancel(dash_duo, manager):
         dash_duo.start_server(app)
         dash_duo.find_element("#start1").click()
         dash_duo.wait_for_text_to_equal("#progress1", "running")
-        dash_duo.find_element("#cancel").click()
+        dash_duo.find_element("#shared_cancel").click()
         dash_duo.wait_for_text_to_equal("#progress1", "idle")
         time.sleep(2.1)
         dash_duo.wait_for_text_to_equal("#output1", "initial")
@@ -586,7 +586,7 @@ def test_lcbc016_multi_page_cancel(dash_duo, manager):
 
         dash_duo.find_element("#start2").click()
         dash_duo.wait_for_text_to_equal("#progress2", "running")
-        dash_duo.find_element("#cancel").click()
+        dash_duo.find_element("#shared_cancel").click()
         dash_duo.wait_for_text_to_equal("#progress2", "idle")
         time.sleep(2.1)
         dash_duo.wait_for_text_to_equal("#output2", "initial")

From da66cb1bca205bce4fa43b10f329c1d39ad2e5f5 Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Tue, 18 Jul 2023 11:25:08 -0400
Subject: [PATCH 24/26] Update changelog.

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35c09f4c34..c557cee238 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@ 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
+- [#2599](https://github.com/plotly/dash/pull/2599) Fix background callback cancel inputs used in multiple callbacks and mixed cancel inputs across pages.
 
 ## Changed
 

From 1974bf1d9403f3dfe3dcb21a7a5c0894d477034f Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Tue, 18 Jul 2023 12:38:39 -0400
Subject: [PATCH 25/26] build


From 909e39cad3041ded960432d29fa493e34cd90dab Mon Sep 17 00:00:00 2001
From: philippe <t4rk@outlook.com>
Date: Tue, 18 Jul 2023 14:07:55 -0400
Subject: [PATCH 26/26] build