vuematerial / vue-material

Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
https://www.creative-tim.com/vuematerial
MIT License
9.88k stars 1.16k forks source link

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

Closed sfcs-mr-ashton closed 1 year ago

sfcs-mr-ashton commented 2 years ago

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, https://github.com/vuematerial/vue-material/pull/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?

marqbeniamin commented 2 years ago

@sfcs-mr-ashton, thank you for using our framework. We will take a look at your PR 🙏 Please, create a PR for our dev branch!