The style of the spin button in igNumericEditor is not correct when it switches from disabled.

[IG-Mori]

Description

To prevent setting values that exceed the maximum and minimum values, the spin button is made inactive in the style, but if you switch between disable and enable for igNumericEditor, the spin button inactivity control will no longer work.

• ignite-ui version: 21.1
• browser: Chrome, Edge

Steps to reproduce

1. Prepare an igNumericEditor with minValue is zero.(The downward spin button is disabled.)
2. If you enter zero, the downward spin button is disabled.
3. Set the option disabled to True.
4. Set the option disabled to False.
5. The downward spin button will be enabled.

Result

The downward spin button will be enabled.

Expected result

The downward spin button should remain disabled.

Attachments

sample.zip

[IG-Mori]

Could you tell me a workaround if there is any?

[PlamenaMiteva]

Hi @IG-Mori ,

the bug with the numeric editor disabled styles not being applied to the spin buttons when switching from disabled has been fixed and will be included into this service release.
As a workaround you can apply the disabled class to the spin button in the valueChanged event handler:
$('#chkbox').igCheckboxEditor({ size: 'small', valueChanged: function (e, args) { $('#numEditor').igNumericEditor('option', 'disabled', $('#chkbox').igCheckboxEditor('value')); var disabled = $('#numEditor').igNumericEditor('option', 'disabled'); var value = $('#numEditor').igNumericEditor('option', 'value'); var minValue = $('#numEditor').igNumericEditor('option', 'minValue'); if (!disabled && value === minValue) { var downButton = $('#numEditor').igNumericEditor("spinDownButton"); downButton.addClass('ui-state-disabled'); downButton.off("mouseenter.button mouseleave.button mousedown.button mouseup.button click.button"); } } });

[IG-Mori]

Hi @PlamenaMiteva ,

Thank you for your support!

I added spinUpButton processing to the workaround.
This worked for both the up and down buttons.

$('#chkbox').igCheckboxEditor({ size: 'small', valueChanged: function (e, args) { $('#numEditor').igNumericEditor('option', 'disabled', $('#chkbox').igCheckboxEditor('value')); var disabled = $('#numEditor').igNumericEditor('option', 'disabled'); var value = $('#numEditor').igNumericEditor('option', 'value'); var minValue = $('#numEditor').igNumericEditor('option', 'minValue'); var maxValue = $('#numEditor').igNumericEditor('option', 'maxValue'); if (!disabled && value === minValue) { var downButton = $('#numEditor').igNumericEditor("spinDownButton"); downButton.addClass('ui-state-disabled'); downButton.off("mouseenter.button mouseleave.button mousedown.button mouseup.button click.button"); } else if (!disabled && value === maxValue) { var upButton = $('#numEditor').igNumericEditor("spinUpButton"); upButton.addClass('ui-state-disabled'); upButton.off("mouseenter.button mouseleave.button mousedown.button mouseup.button click.button"); } } });