q-popup-proxy is not closing q-date popup using refs

valasek

Hi,

can you please help me where to look? Sometimes the code

async onUpdateDate (newValue) {
      this.$refs.qDateProxy.hide()
      console.log(this.$refs.qDateProxy)

is giving me null q-popup-proxy reference

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: this.$refs.qDateProxy is undefined"

and sometimes does not close the pop-up even when reference is filled in:

Object { _uid: 906, _isVue: true, "$options": {…}, _renderProxy: Proxy, _self: {…}, "$parent": {…}, "$root": {…}, "$children": (1) […], "$refs": {…}, _watcher: {…}, … }

and sometimes it just works.

html

              <q-input :value="props.row.date | formatDate" dense >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale"
                      fit anchor="bottom left" self="top left"
                    >
                      <q-date :value="props.row.date" @input="(val) => onUpdateDate({id: props.row.id, date: val})"
                        mask="YYYY-MM-DD" :rules="['date']" first-day-of-week="1"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>

Full code: https://github.com/valasek/timesheet/blob/master/client/src/pages/Report.vue
App - http://timesheet.simplesw.net:8080/report

metalsadman

@valasek inside your onUpdateDate method wrap the call in this.$nextTick(()=>{...}).

valasek

thank you @metalsadman I tried already, but the behavior is the same

    async onUpdateDate (newValue) {
      this.$nextTick(function () {
        console.log(this.$refs.qDateProxy)
        this.$refs.qDateProxy.hide()
      })

I am just thinking if nextTick inside asynch function does not have any unwanted side effects.

metalsadman

@valasek maybe it does yeah, why is the function async tho? you could try a promise approach if you have await there, see if it does it.

valasek

@metalsadman function is async because I have there a dialog confirmation when the user skips to a different week

    async onUpdateDate (newValue) {
      this.$nextTick(function () {
        console.log(this.$refs.qDateProxy)
        this.$refs.qDateProxy.hide()
      })
      let payload = {
        id: newValue.id,
        type: 'date',
        value: newValue.date
      }
      if (isWithinInterval(parseISO(newValue.date), { start: this.dateFrom, end: this.dateTo })) {
        this.$store.dispatch('reportedHours/updateAttributeValue', payload)
      } else {
        if (await this.$refs.confirm.open('Please confirm', 'You selected ' + format(parseISO(newValue.date), 'iiii, MMM do', Intl.DateTimeFormat().resolvedOptions().timeZone) + '. The record will be moved to another week. Continue?', { color: 'bg-warning' })) {
          this.$store.dispatch('reportedHours/updateAttributeValue', payload)
          this.$store.dispatch('settings/jumpToWeek', parseISO(newValue.date))
        }
      }
    },

Will try to use Promise - never used it explicitly …

metalsadman

@valasek or you could try to move your await to a different async function, and make onUpdateDate method not async.

metalsadman

@valasek look like you can do an await for this.$nextTick() since it returns a promise. so i don’t think you need to change your method after all.

valasek

hmm, so now sure how to continue … @metalsadman any advice on what can I try?

I removed acync/await but got the same, broken, functionality.

    confirmDiffrentWeek (d) {
      return Promise.new(this.$refs.confirm.open('Please confirm', 'You selected ' + format(parseISO(d), 'iiii, MMM do', Intl.DateTimeFormat().resolvedOptions().timeZone) + '. The record will be moved to another week. Continue?', { color: 'bg-warning' }))
    },
    onUpdateDate (newValue) {
      this.$nextTick(function () {
        console.log(this.$refs.qDateProxy)
        this.$refs.qDateProxy.hide()
      })
      let payload = {
        id: newValue.id,
        type: 'date',
        value: newValue.date
      }
      if (isWithinInterval(parseISO(newValue.date), { start: this.dateFrom, end: this.dateTo })) {
        this.$store.dispatch('reportedHours/updateAttributeValue', payload)
      } else {
        if (this.confirmDiffrentWeek(newValue.date)) {
          this.$store.dispatch('reportedHours/updateAttributeValue', payload)
          this.$store.dispatch('settings/jumpToWeek', parseISO(newValue.date))
        }
      }
    },

metalsadman

@valasek hmm, try this on your input event @input="... { onUpdateDate..}, the braces is required when you are giving it a handler using arrow function.

valasek

@metalsadman do I understand this correctly: from @input="(val) => onUpdateDate({id: props.row.id, date: val})" to @input="(val) => {onUpdateDate({id: props.row.id, date: val})}"

this change does not work … full code

<q-input :value="props.row.date | formatDate" dense >
                <template v-slot:append>
                  <q-icon name="event" class="cursor-pointer">
                    <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale"
                      fit anchor="bottom left" self="top left"
                    >
                      <q-date :value="props.row.date" @input="(val) => {onUpdateDate({id: props.row.id, date: val})}"
                        mask="YYYY-MM-DD" :rules="['date']" first-day-of-week="1"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>

HLH

Hi:
I have the same problem as you. I have verified that if I put the component inside a v-for it does not work. With this check I assumed that ref must be an array not a single value. (https://stackoverflow.com/questions/52086128/vue-js-ref-inside-the-v-for-loop)
So my solution was:
<template v-for = “(item, i) in items”>
…
   <q-popup-proxy ref = “MyReferences”>
          <q-date
             …
             @input = “() => $ refs.MyReferences [i] .hide ()”
          />
</q-popup-proxy>
…
</template>
Where i = 0,1,2, …
I do not know if in your case this helps you, but to me your doubt helped me to solve mine, thanks

No More Posting New Topics!

q-popup-proxy is not closing q-date popup using refs