fix(taginput): fix dropdown position when autocompleted and appended … #3865
Conversation
…to body When Autocomplete is used as Taginput child, appended to body Dropdown position should be calculated from Taginput element as trigger.
| @@ -664,7 +664,7 @@ export default { | |||
| }, | |||
| updateAppendToBody() { | |||
| const dropdownMenu = this.$refs.dropdown | |||
| const trigger = this.$refs.input.$el | |||
| const trigger = this.$parent.$data._isTaginput ? this.$parent.$el : this.$refs.input.$el | |||
There was a problem hiding this comment.
How does this fix the positioning problem?
There was a problem hiding this comment.
The appended to body dropdown is absolutely positioned and its bounds are calculated from const trigger element bounds. In standalone Autocomplete, align left dropdown with input makes sense, because input left bound remains fixed. But, when inside Taginput, after adding tags, the input left bound changes, causing the bug (I think this is, at least, a consistency bug, considering left position of not appended-to-body dropdown). So, it tests If it's inside Taginput (test already used inside component) and chooses right trigger accordingly.
|
@francisfontoura Could you provide any example code that reproduces the issue? |
I reproduced the bug with the following code and finally got your intention: <template>
<div>
<b-taginput :data="tags" append-to-body autocomplete></b-taginput>
</div>
</template>
<script>
export default {
data() {
return {
tags: [
'Apple',
'Banana',
'Grape',
'Kiwifruit',
'Mango',
'Orange',
'Pineapple'
]
}
}
}
</script> |
…to body (buefy#3865) When Autocomplete is used as Taginput child, appended to body Dropdown position should be calculated from Taginput element as trigger.
…to body (buefy#3865) When Autocomplete is used as Taginput child, appended to body Dropdown position should be calculated from Taginput element as trigger.
…to body (buefy#3865) When Autocomplete is used as Taginput child, appended to body Dropdown position should be calculated from Taginput element as trigger.
…to body
When Autocomplete is used as Taginput child, appended to body Dropdown position should be calculated from Taginput element as trigger.
Fixes #
Proposed Changes