Dialog does not open with ActionSheet

danielsalles

I’m trying to make a custom upload, because what’s in Quasar would not answer me.
Basically what I want is to click on the ActionSheet item, and it will open the upload dialog.
But this does not happen. When the click() event is triggered, the dialog does not open. This does not happen when I change the ActionSheet for a btn. But I do not want it to be btn, but actionsheet.

<input type="file" accept="image/*" ref="file" @click="console" />

    updatePhotoWithAction () {
      this.$q.actionSheet({
        title: 'Alterar foto',
        actions: [
          {
            label: 'Carregar nova',
            icon: 'file upload',
            color: 'blue',
            handler: () => {
              this.$refs.file.click()
              console.log('DOM', this.$refs.file)
              // OPEN MODAL
              // this.opened = true
            }
          },
          {},
          {
            label: 'Remover foto',
            icon: 'delete',
            color: 'negative',
            handler: () => {
              this.$q.notify('Deleted Article')
            }
          }
        ]
      })
    }

this.$refs.file exists normally. Even the DOM is picked up normally, and the event fired. The problem is with the dialog itself.

alt text
The message “Event click() of the triggered input, but does not open the dialog.” appears because I logged in to the @click = "console" of the input file element.

Before they ask. The upload of the quasar does not answer, because I want it to use the ActionSheet to fetch the image, and then open a modal with the croopie.

danielsalles

Up

Because of the spam posted in the category.

rstoenescu

Hi, I fail to see how this is even related to Quasar. So you call “click()” on the input and it doesn’t works… It’s not Quasar’s fault… What I recommend is that you check the web standards on input type=file and see what you are doing wrong. Please correct me if I missed something.

danielsalles

@rstoenescu Investigating further with a user at discordapp we came to the following conclusion.

https://github.com/vuejs/vue/issues/7028

We do not know how the Action Sheet works underneath the cloths, but probably this security in the browser that is preventing the dialog from appearing.

I’ve even tried adding the Action Sheet by component, but it did not work. But by btn it works normally. If you have any other solution, just say so.

Edit:
Probably the quasar is doing something that changes the behavior of an interaction, or something along those lines. I do not know, because I do not know Quasar in depth.

borie88

I have the same issue. You need to figure out a way to turn the action sheet items into label tags and add a “for” attribute that references your input element’s id… Not sure if we can have custom tags on the action sheet items though