Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paper menu still works with a disabled paper button #774

Closed
themmer opened this issue Aug 7, 2017 · 6 comments
Closed

Paper menu still works with a disabled paper button #774

themmer opened this issue Aug 7, 2017 · 6 comments

Comments

@themmer
Copy link

themmer commented Aug 7, 2017

The paper menu still pops up if I disable the paper button that activates the paper menu.

This would be a scenario where I would like to prevent any user interaction on the menu (disable the whole menu). For now I can just disable all menu items as a workaround and give the disabled button aesthetic affordance.

{{#paper-menu as |menu|}}
  {{#menu.trigger}}
    {{#paper-button accent=true iconButton=true disabled=isDisabled}}
      {{paper-icon "audiotrack" title="Song Title"}}
    {{/paper-button}}
  {{/menu.trigger}}
  {{#menu.content width=4 as |content|}}
    {{#content.menu-item disabled=isDisabled onClick=(transition-to "search.songs.song" id)}}
      <span>View Song Page</span>
    {{/content.menu-item}}
  {{/menu.content}}
{{/paper-menu}}
@Subtletree
Copy link
Collaborator

You can disable a menu with {{#paper-menu disabled=true as |menu|}}.

Looks like it doesn't apply any disabled style though which could be good to add.

I guess in the meantime you could disable both the menu and button

@hergaiety
Copy link

I know this is a very old post, but I ran into this today. Alas Subtletree's suggestion did not work (and I see no code in Paper Menu suggesting that disabled=true is supported.

I was able to write an automated rendering test that would click the child of a disabled button, which would open the menu. For us it seems specific to clicking children of the disabled button.

My fix was to conditionally stop propogation depending on the disabled state. Something like...

// template
<PaperMenu as |menu|>
  <menu.trigger>
    <PaperButton @disabled={{this.isDisabled}}>
      <span {{on "click" this.handlePropagation}}>Child Element</span>
...
// component js
...
@action
handlePropagation(event) {
  if (this.isDisabled) event.stopPropagation();
}
...

@Subtletree
Copy link
Collaborator

Alas Subtletree's suggestion did not work (and I see no code in Paper Menu suggesting that disabled=true is supported.

Ah looks like disabled didn't make it through the octane refactor

disabled=publicAPI.disabled

@miguelcobain
Copy link
Owner

I added the argument back. Should be fixed in the next release. Thanks for reporting!

@miguelcobain
Copy link
Owner

Please try 1.0.0-beta.32 and reopen if issue persists.

@ghost
Copy link

ghost commented Nov 24, 2020

The issue comes up again in 1.0.0-beta.35. The mentioned workaround works fine though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants