FIX difference in behaviour between mouse & keyboard interactions on Sliders #12378
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ns on Sliders This fix is to resolve an issue that I encountered when using a currency-formatted value in the bound input on a slider (discussion post: https://github.com/foundation/foundation-sites/discussions/12372). When using mouse interaction the functionality worked correctly, but moving the same slider resulted in a `NaN` error in the bound input field. Looking at the code that deals with the movement of the slider handles, when the handles are moved it gets the value of the slider's position from a data-attribute on the slider aria-valuenow, but in the code that handles the keyboard arrow movement it was getting the value directly from the related bound input field instead. This change modifies the code so that it gets the value from the same data-attribute for keyboard interaction as well.
|
Kudos, SonarCloud Quality Gate passed!
|
|
closes #12379 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This fix is to resolve an issue that I encountered when using a particular combination of a Slider with a bound input field, in this case the bound input field has a currency-formatting function applied on the
moved.zf.slider'event, this function renders the value in the bound input field as a currency value e.g.£100,000, (See original discussion post: https://github.com/foundation/foundation-sites/discussions/12372).See example CodePen showing the issue:
https://codepen.io/rickcurran/pen/WNZqPyo
The issue encountered is that when using mouse interaction the functionality worked correctly, but moving the same slider using the keyboard arrows resulted in a
NaNerror in the bound input field.Looking at the code that deals with the movement of the slider handles in
foundation.slider.js, when the handles are moved via the mouse it gets the value of the slider's position from a data-attribute on the slideraria-valuenow, but in the code that handles the keyboard arrow movement it was getting the value directly from the related bound input field instead.So the issue with the keyboard usage is that when it gets the value from the input field which contains a currency string like
£100,000rather than plain100000, this results in anNaNerror whenparseFloatiss applied to it.Here's the line that gets the value for mouse interaction:
foundation-sites/js/foundation.slider.js
Line 213 in 8846fda
Here's the line that gets the value for keyboard interaction:
foundation-sites/js/foundation.slider.js
Line 524 in 8846fda
So my proposed fix is to make the keyboard interaction get the value from the same data-attribute, so line 524 would be this instead:
oldValue = parseFloat($handle.attr('aria-valuenow')),Types of changes
Checklist
developordevelop-v...).