No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Dialog does not open with ActionSheet

    Help
    3
    5
    1099
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • danielsalles
      danielsalles last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • danielsalles
        danielsalles last edited by

        Up

        Because of the spam posted in the category.

        1 Reply Last reply Reply Quote 0
        • rstoenescu
          rstoenescu Admin last edited by

          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 1 Reply Last reply Reply Quote 0
          • danielsalles
            danielsalles @rstoenescu last edited by 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.

            1 Reply Last reply Reply Quote 0
            • B
              borie88 last edited by

              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

              1 Reply Last reply Reply Quote 0
              • First post
                Last post