Fix unresponsive circle icon in revert button

This commit fixes a UI bug where the circle icon of the revertbutton was
unresponsive to clicks. The solution involves replacing the
pseudo-element (`:before`) with an actual HTML element, enabling direct
event binding.

Additional improvements include:

- Removal of redundant `z-index` properties to simplify click event
  handling and reduce complexity.
- Programmatic toggle of `isChecked` on click, providing more controlled
  and explicit behavior and avoiding issues with native checkbox
  behavior, especially when overlaid on a pseudo-element.
This commit is contained in:
undergroundwires
2023-12-19 10:44:54 +01:00
parent efa05f42bc
commit 645c333787
3 changed files with 42 additions and 11 deletions

View File

@@ -9,6 +9,7 @@ import ToggleSwitch from '@/presentation/components/Scripts/View/Tree/NodeConten
const DOM_INPUT_TOGGLE_CHECKBOX_SELECTOR = 'input.toggle-input';
const DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR = 'span.label-off';
const DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR = 'span.label-on';
const DOM_INPUT_CIRCLE_ICON_SELECTOR = '.circle';
describe('ToggleSwitch.vue', () => {
describe('initial state', () => {
@@ -130,10 +131,25 @@ describe('ToggleSwitch.vue', () => {
});
});
});
it('emits when the circle icon is clicked', async () => { // Regression test for unresponsive circle icon
// arrange
const initialCheckValue = false;
const expectedCheckValue = true;
const wrapper = mountComponent({
properties: {
modelValue: initialCheckValue,
},
});
// act
const circleIcon = wrapper.find(DOM_INPUT_CIRCLE_ICON_SELECTOR);
await circleIcon.trigger('click');
// assert
expect(wrapper.emitted('update:modelValue')).to.deep.equal([[expectedCheckValue]]);
});
});
describe('click propagation', () => {
it('stops propagation `stopClickPropagation` is true', async () => {
it('stops propagation if `stopClickPropagation` is true', async () => {
// arrange
const { wrapper: parentWrapper, parentClickEventName } = mountToggleSwitchParent(
{ stopClickPropagation: true },
@@ -148,7 +164,7 @@ describe('ToggleSwitch.vue', () => {
const receivedEvents = parentWrapper.emitted(parentClickEventName);
expect(receivedEvents).to.equal(undefined);
});
it('allows propagation `stopClickPropagation` is false', async () => {
it('allows propagation if `stopClickPropagation` is false', async () => {
// arrange
const { wrapper: parentWrapper, parentClickEventName } = mountToggleSwitchParent(
{ stopClickPropagation: false },