ractivejs / ractive

Next-generation DOM manipulation
http://ractive.js.org
MIT License
5.94k stars 396 forks source link

When 'on-tap' is on radio button, even if the button is tapped the button is not be 'checked'. #3310

Open n-asa opened 5 years ago

n-asa commented 5 years ago

Description:

When 'on-tap' is on radio button, even if the button is tapped the button is not be 'checked'.

Versions affected:

0.9.11

Platforms affected:

Safari(cordova ios webview)

Reproduction:

HTML: <input type="radio" name="{{r_su}}" value="1" on-tap="['r_su_changed', '1']"> <input type="radio" name="{{r_su}}" value="2" on-tap="['r_su_changed', '2']">

JS: ` r_su_changed: (e, arg) => {

                    if(arg == '1') {

                        this.data.playinfo.r_su = 1;
                        this.data.playinfo.half2_no = '0';
                        this.ractive.set({
                            half2_info: {
                                half2_no: this.data.playinfo.half2_no,
                                half2_course: [{
                                    c_no: '0',
                                    c_name: 'なし',
                                }],
                            },
                            playinfo: this.data.playinfo,
                            select_hidden: (common.isEmpty(this.data.course)),                              });
                    } else {
                        this.data.playinfo.r_su = 2;
                        if(! common.isEmpty(this.data.course)) {
                            this.data.playinfo.half2_no = this.data.course[0].c_no;
                            this.ractive.set({
                                half2_info: {
                                    half2_no: this.data.playinfo.half2_no,
                                    half2_course: half2_course,
                                },
                                select_hidden: false,
                                playinfo: this.data.playinfo,
                            });
                        }
                    }
                    return true;
                },

`

ceremcem commented 5 years ago

Hi @n-asa ,

Would you please clarify your "Reproduction" case by creating a playground example, like this one?

Please cleanup unrelated code from the handler and explicitly declare what you are expecting and what you are getting.

n-asa commented 5 years ago

Hi @ceremcem , Thank you. I'm sorry I didn't make it clear enough. Creating issue is the first time for me. To communicate and clarify the detail of the issue I'll try it.

evs-chris commented 5 years ago

I can't fully tell from the part of the example posted, but it looks like maybe you're shorting the logic in the radio binding by setting r_su to it's new value inside the tap handler. When the binding goes to see if it needs to update, it may be seeing the value already in place and returning early.

I will say, you probably don't want to mix a name binding on the radio button and a tap handler. You would probably be better served with the name binding and an observer on r_su to handle the additional logic.