Skip to content

Prevent trigerring a click action for inner components #80

@xamoom-pali

Description

@xamoom-pali

I am using file-picker wrapping my own component which previews the files about to be uploaded.

    {{#file-picker filesLoaded="filesAddedToTheDroppableArea" multiple=true}}
        {{#each queue as |enrichedMediaItem|}}
            {{media-item-previewer
            mediaItem=enrichedMediaItem
            actionOnUpdate=(action 'updateMediaItem' enrichedMediaItem)
          }}
      {{/each}}
    {{/file-picker}}

As you can see, there is an action 'updateMediaItem' which gets fired when user clicks on an associated button.
My problem is that file-picker listens on click() actions and opens a window for selecting a file to be uploaded (added). It is fine as long as there is nothing to preview (the drag&drop area is empty), but as there is at least 1 file drag&dropped and I can click on my component's button, I don't want to get this click action propagated.
After closing the window my action takes over. As you assume, I want to prevent file-picker opening the window if the event target is my component.
I believe this is the line that causes the problem:

  click: function(event) {
    if (this.get('selectOnClick') === true) {
      if (!$(event.target).hasClass('file-picker__input')) {
        this.$('.file-picker__input').trigger('click');
      }
    }
  },

I managed to achieve the target as follows:

  • pass selectOnClick=false to the file-picker: {{#file-picker selectOnClick=false ... }}
  • overrode click() action in my component that wraps file-picker:
    click(e){
      if ($(e.target).hasClass('file-picker__dropzone')){
         this.$('.file-picker__input').trigger('click'); // do the same as click() in file-picker.js
      }
    }

Now, everytime I click anywhere inside the file-picker dropzone area, the file selection window pops up UNLESS the direct target is the dropzone area. Clicking any other element that belongs to my component is treated by the component.

Is there a better way? Would it be an idea for extending the functionality or am I doing something wrong?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions