ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.13k stars 14.64k forks source link

[Feature Request] Get <input> in autocomplete-suggestions using getInput() #18751

Open martdn opened 4 years ago

martdn commented 4 years ago

Existing Component

Yes

Component Name

Autocomplete

Description

Get <input> in autocomplete-suggestions using getInput() method

Autocomplete-suggestions.vue component contains a reference, which allows to get input value from parent component.

// element-ui/packages/autocomplete/src/autocomplete-suggestions.vue

this.referenceElm = this.$parent.$refs.input.$refs.input;

But the component el-input already has a getInput() method, why we can't just use it instead of $refs?

// element-ui/packages/input/src/input.vue

methods: {
  getInput() {
    return this.$refs.input || this.$refs.textarea;
  }
}

The issue: when we make a wrapper for el-input, the autocomplete-suggestions component gets incorrect $refs, which can be avoided by using a getInput() method.

Exemple: https://gist.github.com/martdn/1da5addd6a0f55c235c97d4c4e7053bd

Steps to reproduce

  1. Wrap el-input in a component, e.g. v-input
  2. Create a wrapper for autocomplete and change el-input stock component to v-input custom component in the template https://gist.github.com/martdn/1da5addd6a0f55c235c97d4c4e7053bd#file-autocomplete-vue
  3. In this case autocomplete-suggestions addresses the v-input component by $refs and throws an error
stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.