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-switch: not working when in paper-item #1051

Closed
atstoyanov opened this issue Jan 15, 2019 · 1 comment
Closed

paper-switch: not working when in paper-item #1051

atstoyanov opened this issue Jan 15, 2019 · 1 comment

Comments

@atstoyanov
Copy link

atstoyanov commented Jan 15, 2019

We are using:
Ember 3.5.1
Ember-paper version 1.0.0-beta 21

When using a paper-switch into paper-item and the paper-item 'onclick' action is not set, clicking on the switch doesn't fire the switch 'onclick' action. Clicking on the paper-item fires the switch 'onclick' action.

paper-switch-issue
The code I use to reproduce it is from the ember-paper's site

The issue is reproducible with this code also.

{{#paper-list}}

  {{#paper-subheader}}Clickable Items with Secondary Controls{{/paper-subheader}}
  {{#paper-item  as |controls|}}
    {{paper-icon "network-wifi"}}
    <p>Wi-Fi</p>
    <div class="md-secondary-container">
      {{controls.switch secondary=true value=wifiEnabled onChange=(action (mut wifiEnabled))}}
    </div>
  {{/paper-item}}
  {{#paper-item  as |controls|}}
    {{paper-icon "bluetooth"}}
    <p>Bluetooth</p>
    <div class="md-secondary-container">
      {{controls.switch secondary=true value=bluetoothEnabled onChange=(action (mut bluetoothEnabled))}}
    </div>
  {{/paper-item}}
  
  {{paper-divider}}

{{/paper-list}}

Reproducible issue can be found here

The issue was introduced with #1007

Workaround: extend paper-switch and overwrite the _setupSwitch and _teardownSwitch methods with the old ones:

import PaperSwitch from 'ember-paper/components/paper-switch';
import { run } from '@ember/runloop';

export default PaperSwitch.extend(ColorMixin, {
    _setupSwitch() {
        this.set('switchWidth', this.$('.md-thumb-container').innerWidth());

        let switchContainer = this.$('.md-container').get(0);
        let switchHammer = new Hammer(switchContainer);
        this._switchContainerHammer = switchHammer;

        // Enable dragging the switch container
        switchHammer.get('pan').set({ threshold: 1 });
        switchHammer.on('panstart', run.bind(this, this._dragStart))
            .on('panmove', run.bind(this, this._drag))
            .on('panend', run.bind(this, this._dragEnd));

        // Enable tapping gesture on the switch
        this._switchHammer = new Hammer(this.element);
        this._switchHammer.on('tap', run.bind(this, this._dragEnd));
        this.$('.md-container').on('click', run.bind(this, this._handleNativeClick));
    },

    _teardownSwitch() {
        if (this._switchContainerHammer) {
            this._switchContainerHammer.destroy();
            this._switchHammer.destroy();
        }
    },
});
@miguelcobain
Copy link
Owner

This should be fixed and released on beta 23. Thanks for reporting!

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

2 participants