iOS MaterialButton touch effect issue when using multiple buttons on one page

[daniel-luberda]

Describe the bug
When having multiple buttons on one page, somehow when button clicked once - it flashes also after tapping other buttons.

Expected behavior
Button's background should not flash when other button is clicked

Screenshots
https://www.dropbox.com/s/t433v8ga8bmch8o/ripple_issue.mov?dl=0

[contrix09]

Can you provide me the sample XAML.

[daniel-luberda]

Ok, that's tricky. I tried to prepare a sample project and couldn't reproduce it, then I noticed it's related to Command parameter binding.

I use custom ICommand implementation which raises CanExecuteChanged event every time to prevent multiple command execution before pending command task is finished (https://github.com/xamvvm/xamvvm/blob/master/source/Xamvvm.Core/Implementations/BaseCommand.cs)

with a Xamarin.Form.Command the issue is gone. I'll need to review it to have more info.

[daniel-luberda]

Update:

• It's definitely CanExecuteChanged. Somehow MaterialButton collides with it.
• Only "flash" effect is affected with this issue.
• CanExecuteChanged works just fine with Xamarin.Forms.Button.

[daniel-luberda]

https://github.com/xamarin/Xamarin.Forms/blob/3c3ecfd45489f119edfb922e01c0514a0bb74e2a/Xamarin.Forms.Core/ButtonElement.cs#L34-L54

As you see it changes IsEnabled property while animating. Currently MaterialButton doesn't handle it correctly.

[contrix09]

MaterialButton directly inherits Xamarin.Forms.Button and I think it handles the CanExecuteChanged of the Command property the same. The problem maybe in the iOS platform renderer of MaterialButton since it uses a UIGestureRecognizer to animate the control.

Can you try to provide a repro code using the custom ICommand implementation?

[daniel-luberda]

Sure: MaterialButtonIssue.zip

[contrix09]

Hi. As I suspected, it was the MaterialButtonRenderer in the iOS platform. The animation for highlighting the background of the button was not being removed when the touch input has ended. But I don't know why the animation was being called from another button. What I did was to remove the highlight animation once the button was released.

You can see below the issue has been fixed:

[daniel-luberda]

Great! :)

BTW: Thanks for such a nice lib!