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

RangeInput - onchange event not fired on mobile browsers #966

Open
BradlesAUS opened this issue Dec 4, 2024 · 0 comments
Open

RangeInput - onchange event not fired on mobile browsers #966

BradlesAUS opened this issue Dec 4, 2024 · 0 comments

Comments

@BradlesAUS
Copy link

Describe the bug
When specifying an @onchange event for the RangeInput, it does not fire on mobile browsers when the user "drops" the button.

To Reproduce
Steps to reproduce the behavior:

  1. Create a new Blazor Web App (details below)
  2. Add Blazor Bootstrap per documented instructions.
  3. Modify the counter page to add a RangeInput (code below)
  4. Test on the desktop to verify functionality
  5. Deploy to a server (I used Azure App Service) or otherwise arrange to access from a mobile device.
  6. Test on a mobile browser.

Expected behavior
When the user drops the slider button, the "Update message" should be updated with the new value. It appears that the event is not fired as expected.

Screenshots
N/A

Versions:

  • .NET Version: .NET 9
  • BlazorBootstrap: 3.2.0
  • Blazor WebAssembly / Server: Server
  • Blazor Interactive Render Mode: Server
  • Blazor Interactivity Location: Global (also Per page/component)

Sample code

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<p role="status">Update message: @updateRangeMessage</p>
<RangeInput TValue="int" @onclick=UpdateRange @bind-Value =@currentCount Min=0 Max=100 />
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private string? updateRangeMessage;
    private void IncrementCount()
    {
        currentCount++;
    }

    // this should get called ONCE when they drop the slider.
    private void UpdateRange()
    {
        Console.WriteLine($"UpdatePercentComplete() - {currentCount}%");
        updateRangeMessage = $"Percent Complete {currentCount}%";
    }
}

GitHub repo
None

Desktop (NB: It works on the desktop):

  • OS: Windows 11
  • Browser: Chrome; Firefox; Edge.
  • Version: Chrome 131.0.6778.109 (64-bit); Firefox 133.0 (64-bit); Edge 131.0.2903.70 (64-bit)

Smartphone (NB: The problem exists only on mobile devices):
iPad Pro

  • Device: iPadPro 12.9 inch (1st Gen)
  • OS: iPadOS 16.7.10
  • Browser: Safari; Firefox.
  • Version: Safari default; Firefox 132.1

Android Phone

  • Device: Oppo Reno 12 5G
  • OS: Android (ColorOS 14.1)
  • Browser: Chrome
  • Version: Chrome 131.0.6778.81
  • NB: Site doesn't work on stock browser)

Android Tablet

  • Device: Oppo Pad Neo
  • OS: Android (ColorOS 14.0)
  • Browser: Chrome
  • Version: Chrome 131.0.6778.81

Additional context
The onchange event does fire on iPadOS when the user clicks on the slider bar somewhere. It does not do this on Android.
The ValueChanged event does fire as the user drags the button, but this happens dozens or potentially hundreds of times, and I am doing a costly API call, so can't use this event.

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

1 participant