fix(VSlider): add missing prepend and append icon click events

[vexleet]

Description

Motivation and Context

There were props for adding click events for the append and prepend icons in the v slider but they weren't used in the component which led to not being able to have events for the icons, which would fix #16071

How Has This Been Tested?

I created a unit test using cypress which adds a slider with 2 icons and putting events on them, after that I used cypress spies to check if the button events worked when both icons were clicked.

Markup:

// Paste your FULL Playground.vue here

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[nekosaur]

@KaelWD we're filtering out event props here

vuetify/packages/vuetify/src/components/VInput/VInput.tsx

Line 191 in f627eb1

const keys = Object.keys(VInput.props).filter(k => !isOn(k))

which is the root cause of this issue. What's the reason we're doing this?

[KaelWD]

I think because VTextField does some other stuff first then waits a tick before re-emitting clear:

vuetify/packages/vuetify/src/components/VTextField/VTextField.tsx

Lines 126 to 136 in f6ee9a3

	function onClear (e: MouseEvent) {
	e.stopPropagation()
	onFocus()
	nextTick(() => {
	model.value = null
	callEvent(props['onClick:clear'], e)
	})
	}

If clear was part of fieldProps it'd happen twice
We could probably do something similar to line 145 though and just
const [{ 'onClick:clear': _, ...fieldProps }] = filterFieldProps(props)

[johnleider]

Is that the advised direction @KaelWD? To add exceptions for those events?

[johnleider]

@KaelWD @nekosaur any updates?

[johnleider]

Possibly related: #15904, #16945, 133b417

[yuwu9145]

I think because VTextField does some other stuff first then waits a tick before re-emitting clear:

vuetify/packages/vuetify/src/components/VTextField/VTextField.tsx

Lines 126 to 136 in f6ee9a3

	function onClear (e: MouseEvent) {
	e.stopPropagation()
	onFocus()
	nextTick(() => {
	model.value = null
	callEvent(props['onClick:clear'], e)
	})
	}

If clear was part of fieldProps it'd happen twice
We could probably do something similar to line 145 though and just
const [{ 'onClick:clear': _, ...fieldProps }] = filterFieldProps(props)

VField is emitting "prependInner" rather than "prepend". So clear event shouldn't bother. Regarding this ticket, we should focus on filterInputProps for VInput as opposed to VField.

Removing .filter(k => !isOn(k)) on filterInputProps makes sense, it resolves all similar issues including #17070, however, would this be a breaking change?

I think it should be ok. Because VInput props only has two event emits: onClick:prepend & onClick:append:

• Their event listeners does not seem to link to any nextTick effect like "clear" does in existing components
• Even if in future, in case any of them has to be linked to any nextTick, we could just do something similar to that line 145 const [{ 'onClick:clear': _, ...fieldProps }] = filterFieldProps(props) (as @KaelWD suggested) in order to deliberately exclude an event from default filtered props and munally control its emit