Skip to content

Autocomplete does not receive the md-clear from md-field child  #2350

@sfcs-mr-ashton

Description

@sfcs-mr-ashton

On the Autocomplete Component The md-clear event does not propagate up from the md-field child component as their is not emit tied to that event.

Replicated here:
https://codesandbox.io/embed/vue-material-quick-start-forked-5ny7o

I Found a similar issue with the datepicker which was resolved here, #1967. I used that as a template to fix the autocomplete component on my fork.

Code comparision.

vue-material/src/components/MdAutocomplete/MdAutocomplete.vue
@@ -1,5 +1,5 @@
 <template>
-  <md-field class="md-autocomplete" :class="fieldClasses" md-clearable :md-inline="isBoxLayout">
+  <md-field class="md-autocomplete" :class="fieldClasses" :md-clearable="mdClearable" @md-clear="onClear" :md-inline="isBoxLayout">
     <md-menu md-direction="bottom-start" :md-dense="mdDense" md-align-trigger md-full-width :md-active.sync="showMenu">
       <md-input
         v-model="searchTerm"
@@ -73,7 +73,11 @@
       mdInputName: String,
       mdInputId: String,
       mdInputMaxlength: [String, Number],
-      mdInputPlaceholder: [String, Number]
+      mdInputPlaceholder: [String, Number],
+      mdClearable: {
+        type: Boolean,
+        default: true
+      }
     },
     data () {
       return {
@@ -220,6 +224,9 @@
         this.$emit('input', item)
         this.$emit('md-selected', item)
         this.hideOptions()
+      },
+      onClear: function onClear() {
+        this.$emit('md-clear');
       }
     }
   }

This is my first time posting publicly on Github, not sure what I need to do next. Should I submit a pull request for this fix?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions