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



  • 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



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



  • 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.



  • @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.



  • @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 …



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



  • @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.



  • 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))
            }
          }
        },
    


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



  • @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>
    

Log in to reply