diff --git a/CHANGELOG.md b/CHANGELOG.md index 99226ec29..5e86aec85 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Fixed - Fix Vertical Slider regression [#479](https://github.com/plotly/dash/issues/479) +- Fix Slider regression [#485](https://github.com/plotly/dash/issues/485) ## [0.44.0] - 2019-03-04 ### Added diff --git a/src/components/RangeSlider.react.js b/src/components/RangeSlider.react.js index c0ee802f3..3a3f0b4d5 100644 --- a/src/components/RangeSlider.react.js +++ b/src/components/RangeSlider.react.js @@ -18,31 +18,47 @@ export default class RangeSlider extends Component { } render() { - const {setProps, updatemode, loading_state} = this.props; + const { + className, + id, + loading_state, + setProps, + updatemode, + vertical, + } = this.props; const {value} = this.state; return ( - { - this.setState({value}); - if (updatemode === 'drag') { - if (setProps) { - setProps({value}); + className={className} + style={vertical ? {height: '100%'} : {}} + > + { + this.setState({value}); + if (updatemode === 'drag') { + if (setProps) { + setProps({value}); + } } - } - }} - onAfterChange={value => { - if (updatemode === 'mouseup') { - if (setProps) { - setProps({value}); + }} + onAfterChange={value => { + if (updatemode === 'mouseup') { + if (setProps) { + setProps({value}); + } } - } - }} - value={value} - {...omit(['value', 'setProps', 'updatemode'], this.props)} - /> + }} + value={value} + {...omit( + ['className', 'value', 'setProps', 'updatemode'], + this.props + )} + /> + ); } } diff --git a/src/components/Slider.react.js b/src/components/Slider.react.js index 28378ecba..552a0b696 100644 --- a/src/components/Slider.react.js +++ b/src/components/Slider.react.js @@ -18,7 +18,14 @@ export default class Slider extends Component { } render() { - const {id, loading_state, setProps, updatemode, vertical} = this.props; + const { + className, + id, + loading_state, + setProps, + updatemode, + vertical, + } = this.props; const {value} = this.state; return (
); diff --git a/test/test_integration.py b/test/test_integration.py index 1913be892..fc6054ff5 100644 --- a/test/test_integration.py +++ b/test/test_integration.py @@ -5,6 +5,7 @@ import io import os import sys +from multiprocessing import Lock import time import json @@ -215,6 +216,74 @@ def test_upload_gallery(self): self.snapshot('test_upload_gallery') + def test_loading_slider(self): + lock = Lock() + lock.acquire() + + app = dash.Dash(__name__) + + app.layout = html.Div([ + html.Label(id='test-div', children=['Horizontal Slider']), + dcc.Slider( + id='horizontal-slider', + min=0, + max=9, + marks={i: 'Label {}'.format(i) if i == 1 else str(i) + for i in range(1, 6)}, + value=5, + ), + ]) + + @app.callback( + Output('horizontal-slider', 'value'), + [Input('test-div', 'children')] + ) + def delayed_value(children): + lock.acquire() + lock.release() + return 5 + + self.startServer(app) + + self.wait_for_element_by_css_selector( + '#horizontal-slider[data-dash-is-loading="true"]' + ) + lock.release() + + self.wait_for_element_by_css_selector( + '#horizontal-slider:not([data-dash-is-loading="true"])' + ) + + for entry in self.get_log(): + raise Exception('browser error logged during test', entry) + + def test_horizontal_slider(self): + app = dash.Dash(__name__) + + app.layout = html.Div([ + html.Label('Horizontal Slider'), + dcc.Slider( + id='horizontal-slider', + min=0, + max=9, + marks={i: 'Label {}'.format(i) if i == 1 else str(i) + for i in range(1, 6)}, + value=5, + ), + ]) + self.startServer(app) + + self.wait_for_element_by_css_selector('#horizontal-slider') + self.snapshot('horizontal slider') + + h_slider = self.driver.find_element_by_css_selector( + '#horizontal-slider div[role="slider"]' + ) + h_slider.click() + + for entry in self.get_log(): + raise Exception('browser error logged during test', entry) + def test_vertical_slider(self): app = dash.Dash(__name__) @@ -243,6 +312,112 @@ def test_vertical_slider(self): for entry in self.get_log(): raise Exception('browser error logged during test', entry) + def test_loading_range_slider(self): + lock = Lock() + lock.acquire() + + app = dash.Dash(__name__) + + app.layout = html.Div([ + html.Label(id='test-div', children=['Horizontal Range Slider']), + dcc.RangeSlider( + id='horizontal-range-slider', + min=0, + max=9, + marks={i: 'Label {}'.format(i) if i == 1 else str(i) + for i in range(1, 6)}, + value=[4, 6], + ), + ]) + + @app.callback( + Output('horizontal-range-slider', 'value'), + [Input('test-div', 'children')] + ) + def delayed_value(children): + lock.acquire() + lock.release() + return [4, 6] + + self.startServer(app) + + self.wait_for_element_by_css_selector( + '#horizontal-range-slider[data-dash-is-loading="true"]' + ) + lock.release() + + self.wait_for_element_by_css_selector( + '#horizontal-range-slider:not([data-dash-is-loading="true"])' + ) + + for entry in self.get_log(): + raise Exception('browser error logged during test', entry) + + def test_horizontal_range_slider(self): + app = dash.Dash(__name__) + + app.layout = html.Div([ + html.Label('Horizontal Range Slider'), + dcc.RangeSlider( + id='horizontal-range-slider', + min=0, + max=9, + marks={i: 'Label {}'.format(i) if i == 1 else str(i) + for i in range(1, 6)}, + value=[4, 6], + ), + ]) + self.startServer(app) + + self.wait_for_element_by_css_selector('#horizontal-range-slider') + self.snapshot('horizontal range slider') + + h_slider_1 = self.driver.find_element_by_css_selector( + '#horizontal-range-slider div.rc-slider-handle-1[role="slider"]' + ) + h_slider_1.click() + + h_slider_2 = self.driver.find_element_by_css_selector( + '#horizontal-range-slider div.rc-slider-handle-2[role="slider"]' + ) + h_slider_2.click() + + for entry in self.get_log(): + raise Exception('browser error logged during test', entry) + + def test_vertical_range_slider(self): + app = dash.Dash(__name__) + + app.layout = html.Div([ + html.Label('Vertical Range Slider'), + dcc.RangeSlider( + id='vertical-range-slider', + min=0, + max=9, + marks={i: 'Label {}'.format(i) if i == 1 else str(i) + for i in range(1, 6)}, + value=[4, 6], + vertical=True, + ), + ], style={'height': '500px'}) + self.startServer(app) + + self.wait_for_element_by_css_selector('#vertical-range-slider') + self.snapshot('vertical range slider') + + v_slider_1 = self.driver.find_element_by_css_selector( + '#vertical-range-slider div.rc-slider-handle-1[role="slider"]' + ) + v_slider_1.click() + + v_slider_2 = self.driver.find_element_by_css_selector( + '#vertical-range-slider div.rc-slider-handle-2[role="slider"]' + ) + v_slider_2.click() + + for entry in self.get_log(): + raise Exception('browser error logged during test', entry) + def test_gallery(self): app = dash.Dash(__name__)