Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: declare component events that can be emitted MP-873 MP-901 #5577

Merged
merged 4 commits into from
Oct 3, 2024

Conversation

emuvente
Copy link
Collaborator

@emuvente emuvente commented Oct 3, 2024

With Vue 3 it is best practice to declare the events that can be emitted by a component using the emits option or the defineEmits method (see https://v3-migration.vuejs.org/breaking-changes/emits-option.html). This is especially important for components that emit events with the same name as native html events (click, change, update, input, etc.) because:

...Vue will now add all event listeners that are not defined as component-emitted events in the child as native event listeners to the child's root element (unless inheritAttrs: false has been set in the child's options). (https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html)

If the events are not declared it can lead to unexpected behavior, like event listeners being called twice; first with the custom event value, and then again with an html event.

Events that are not named the same as html events behave as expected whether or not they are declared, which is why this issue was not obvious.

Here are components changed in this PR that use native html event names that we should confirm still work after these changes:

change

  • src/components/Kv/KvCarousel.vue
  • src/components/Kv/KvCauseSelector.vue
  • src/components/Kv/KvRangeSlider.vue
  • src/components/Kv/KvToggle.vue

click

  • src/components/15Years/15YearsButton.vue
  • src/components/Kv/KvChipClassic.vue
  • src/components/Stats/StatsTable.vue
  • src/pages/Autolending/WhoYoullSupportText.vue

update

  • src/components/Forms/ReCaptchaEnterprise.vue
  • src/components/Kv/KvCheckbox.vue
  • src/components/LoansByCategory/HelpmeChoose/HelpmeChooseTrigger.vue
  • src/components/LoansByCategory/HelpmeChoose/HelpmeChooseWrapper.vue
  • src/pages/Autolending/CheckList.vue
  • src/plugins/any-or-selected-autolending-radio-mixin.js

input

  • src/components/Kv/KvCurrencyInput.vue
  • src/components/Kv/KvPhoneInput.vue
  • src/components/Kv/KvRangeSlider.vue
  • src/components/Kv/KvVerificationCodeInput.vue

select

  • src/components/LoansByCategory/HelpmeChoose/HelpmeChooseBorrowerSelector.vue

I'm not sure how the emits option is merged when it is used in a mixin, or if it works in a mixin at all, so we should also confirm that components using these mixins still work:

  • src/components/LoanCards/ExpandableLoanCard/expandableLoanCardMixin.js
  • src/components/LoanCards/HoverLoanCard/hoverLoanCardMixin.js
  • src/plugins/add-to-basket-exp-mixin.js
  • src/plugins/any-or-selected-autolending-radio-mixin.js
  • src/plugins/retry-after-expired-basket-mixin.js

@emuvente emuvente requested a review from a team October 3, 2024 00:01
@emuvente emuvente merged commit 4b0e6f9 into main Oct 3, 2024
5 checks passed
@emuvente emuvente deleted the cause-selector-vue-3 branch October 3, 2024 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants