I've been working on a custom dropup component and have encountered some strange issues with it. The main problem is the blur event not firing when clicking outside of the input field.
My goal is to hide the options elements on blur, reset the component to the Initial View if there's no localValue, and set it to the Selected State if there is a localValue. However, I'm struggling to get the blur event to work correctly.
---Designs---
Initial State
https://i.stack.imgur.com/BNYjQ.png
Toggled State
https://i.stack.imgur.com/GqZWw.png
Selected State
https://i.stack.imgur.com/wqMiA.png
To see this issue in action, check out my CodeSandbox demo.
I'd appreciate any suggestions on how to resolve this and get the blur event working properly.
Any help or advice would be greatly welcomed!
Cheers!
NOTE
I tried putting the blur event directly on the input element, but it didn't solve the issue completely. While using optionsAreVisible.value = true did close the dropdown, I still believe triggering blur on the entire element is more appropriate.
Extra Issues:
Is my combination of
:key="buttonKey"andbuttonKey.value++to reset the component correct? It feels a bit hacky to me, so I'm unsure about its validity.How can I make the Initial State and Selected State the same size? The selected state has additional elements, but both designs should have equal width. I'm having difficulty achieving this without hardcoding widths.
There seems to be an issue with
, as it isn't functioning in Codesandbox. Any insights on why this might be happening? https://i.stack.imgur.com/V2Vep.png:class="[localValue === '' ? '_hide' : '', '_input-active-delete']"
SelectModelInput Component
<template>
<!-- Component template code here -->
</template>
<script>
export default {
// Script goes here
};
</script>
<style lang="scss" scoped>
/* Styling for the component */
</style>
App.vue File
<template>
<!-- Template content -->
</template>
<script>
export default {
// JavaScript logic here
};
</script>
<style lang="scss" scoped>
/* Styling for the app */
</style>