Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(MdAutocomplete): options with objects #1338

Closed
wants to merge 2 commits into from
Closed

fix(MdAutocomplete): options with objects #1338

wants to merge 2 commits into from

Conversation

VdustR
Copy link
Member

@VdustR VdustR commented Dec 25, 2017

BREAKING CHANGE: Selected object only be passed via @md-selected, v-model is always bound with searchTerm.

  • v-model type is changed to [String, Number] and always be bound with searchTerm.
  • @md-selected pass selected item. This could be used to get the selected object. This event would be emitted on next tick after v-model changed because the case that clear selected item while searchTerm changed considered.
  • new props :md-get-plain-text aim to ignore content with iconic font added.

fix #1243

BREAKING CHANGE: Selected object only be passed via `@md-selected`, `v-model` is always bind
`searchTerm` as a `string` now.

fix #1243
aim to ignore content with iconic fonts

fix #1243
@marcosmoura
Copy link
Member

@VdustR Is there any way that you think of about not turning this into a breaking change, but keep the object support for autocomplete?

@VdustR
Copy link
Member Author

VdustR commented Dec 27, 2017

While v-model bound with searchTerm, it's already a breaking change in my opinion because searchTerm don't support objects.

@lokkilok
Copy link

lokkilok commented Jan 8, 2018

Ran into the same problem, and had a look at this Pull Request. I wonder if it could be better to fix this such that searchTerm would be a computed attribute such that if a function like getPlainText is given that function is used to return a String, and otherwise the value as such (or perhaps cast as a String) is returned. Just a thought.... haven't tried that myself yet.

@lokkilok
Copy link

lokkilok commented Jan 8, 2018

Played around a bit with that idea and came up with a slightly different solution, using just a field name on the item that should return a String. Probably also a breaking change, as parent components that want to update with an Object when an Object is selected will have to listen to md-selected. I'm pretty new to Vue and vue-material, so I've no idea if the following path (against the dev branch version) is any better...

@@ -73,11 +73,12 @@
       mdInputName: String,
       mdInputId: String,
       mdInputMaxlength: [String, Number],
-      mdInputPlaceholder: [String, Number]
+      mdInputPlaceholder: [String, Number],
+      mdValueTextField: String
     },
     data () {
       return {
-        searchTerm: this.value,
+        searchTerm: (this.mdValueTextField && this.value) ? this.value[this.mdValueTextField] : this.value,
         showMenu: false,
         triggerPopover: false,
         isPromisePending: false,
@@ -136,7 +137,7 @@
       },
 
       value (val) {
-        this.searchTerm = val
+        this.searchTerm = (this.mdValueTextField && val) ? val[this.mdValueTextField] || val : val
       }
     },
     methods: {
@@ -205,7 +206,7 @@
         this.$emit('md-closed')
       },
       selectItem (item, $event) {
-        const content = $event.target.textContent.trim()
+        const content = this.mdValueTextField ? item[this.mdValueTextField] : $event.target.textContent.trim()
 
         this.searchTerm = content
         this.$emit('input', item)

@thomasklein
Copy link

Hi! Any updates on this PR?

@NaturalDevCR
Copy link

Will this PR merge? any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[MdAutocomplete] options with objects.
6 participants