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(kfileupload, kselect, kmultiselect): kinput id [KHCP-12336] #2241

Merged
merged 11 commits into from
Jun 19, 2024

Conversation

portikM
Copy link
Member

@portikM portikM commented Jun 17, 2024

Summary

Binding id to KInput in KFileUpload, KSelect and KMultiselect through v-bind-once directive creates a problem where the id gets assigned to the wrong element because the directive ignores the inherritAttrs: false setting. That means:

  • in cases when we don't pass a static id and automatically generate one in the component, the id attribute on input element is different from for attribute value on label element
  • in cases when we pass static id, two elements (the input and the wrapping element) end up having the same id

Solution: do not rely on v-bind-once in said components and

  • when we don't set static id, in onMounted hook assign label for attribute programatically based on value of input id attribute
  • use static value when one is provided

PR Checklist

  • Conventional Commits all commits follow the conventional commit standards outlined in the main README.
  • Tests coverage: test coverage was added for new features and bug fixes
  • Docs: includes a technically accurate README

@portikM portikM self-assigned this Jun 17, 2024
Copy link

netlify bot commented Jun 17, 2024

Deploy Preview for kongponents-sandbox ready!

Name Link
🔨 Latest commit 222f04d
🔍 Latest deploy log https://app.netlify.com/sites/kongponents-sandbox/deploys/66725506bc972b000825ad0a
😎 Deploy Preview https://deploy-preview-2241--kongponents-sandbox.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Jun 17, 2024

Deploy Preview for kongponents ready!

Name Link
🔨 Latest commit 222f04d
🔍 Latest deploy log https://app.netlify.com/sites/kongponents/deploys/6672550640870b000888df63
😎 Deploy Preview https://deploy-preview-2241--kongponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@portikM portikM marked this pull request as ready for review June 17, 2024 19:22
@portikM portikM requested a review from a team as a code owner June 17, 2024 19:22
@portikM portikM merged commit 528280d into alpha Jun 19, 2024
9 checks passed
@portikM portikM deleted the fix/khcp-12336-v-bind-once-duplicate-ids branch June 19, 2024 13:15
kongponents-bot pushed a commit that referenced this pull request Jun 19, 2024
# [9.0.0-alpha.179](v9.0.0-alpha.178...v9.0.0-alpha.179) (2024-06-19)

### Bug Fixes

* **kfileupload, kselect, kmultiselect:** kinput id [KHCP-12336] ([#2241](#2241)) ([528280d](528280d))
@kongponents-bot
Copy link
Collaborator

🎉 This PR is included in version 9.0.0-alpha.179 🎉

The release is available on:

Your semantic-release bot 📦🚀

@@ -65,13 +69,16 @@
</template>

<script lang="ts" setup>
defineOptions({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn’t this go below the imports?

}

watch(fileInputKey, async () => {
await nextTick()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does this code need to be in a separate watcher instead of in the one below that triggers the key to increment?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants