Slider Thumb is not retaining its focus when value changed via keyboard

[bsteinbk]

Slider Thumb is not retaining its focus when value changed via keyboard.

Describe the bug (actual behavior)

Expected behavior

A thumb is focused user should be able to adjust value by pressing arrow key multiple times.

Reproduction

export const ProcessChange: Story<Partial<SliderProps>> = (args) => {
  const [sliderValues, setSliderValues] = React.useState([20, 40]);

  return (
    <Slider
      {...args}
      values={sliderValues}
      onChange={(values) => setSliderValues([...values])}
    />
  );
};

ProcessChange.args = {
  min: 0,
  max: 60,
  tickLabels: ['0', '20', '40', '60'],
  tooltipProps: (index, val) => {
    return { placement: 'right', content: `\$${val}.00` };
  },
};

Steps to reproduce

1. Use above code
2. Set focus to first thumb
3. Press Arrow key and note that after the first key press focus is lost

Additional information

See proposed fix in https://github.com/iTwin/iTwinUI-react/pull/232

[mayank99]

This is now available in 1.14.0 🎉