Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ BUG - slider ] onChangeCommitted not triggered when we click on the slider or on a mark #3470

Closed
tiago-narciso opened this issue Nov 27, 2023 · 0 comments · Fixed by #3472

Comments

@tiago-narciso
Copy link

What version of rsuite are you using?

5.46.0

What version of React are you using?

18.2.0

What version of TypeScript are you using (if any)?

5.0.4

What browser are you using?

Google chrome Version 119.0.6045.159 (Build officiel) (arm64)

Describe the Bug

Using the slider of rsuite, i wanted to use the onChangeCommitted to only call an api when a change on the slider is committed so it doesn't call it everytime it triggers the onChange function. The problem is that onChangeCommitted is only triggered when we drag and drop the bullet point of the slider, when we just click on a mark or directly on the slider, the onchange function is triggered but not the onChangeCommitted

Expected Behavior

When we click on a mark or directly on the slider, it also triggers the onChangeCommitted function

To Reproduce

Here, if we drag and drop the button, the onChangeCommitted is triggered, but if we click on a mark or directly on the slider it is not triggered

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
import './slider.less';
import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
import './slider.less';
import { Slider } from 'rsuite';
import { useState } from 'react';

const App = () => {
  const [triggeringVal, setTriggeringVal] = useState(0);
  return (
    <div style={{ padding: 20 }}>
      <Slider
        defaultValue={triggeringVal}
        value={triggeringVal}
        step={64}
        graduated
        progress
        min={64}
        max={1024}
        onChangeCommitted={(val, event) => {
          setTriggeringVal(val);
          console.log('commited change');
        }}
        renderMark={(mark) => {
          if ([64, 128, 256, 512, 1024].includes(mark)) {
            return <span>{mark} GB</span>;
          }
          return null;
        }}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants