[4.0.0] - ion-range - ionBlur changed behavior

[JumBay]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

ionBlur is triggered once the user click outside the range

Expected behavior:

It should be triggered once the user release the slider knob as it used to be

Steps to reproduce:

import { Component } from '@angular/core';

@Component({
  template: `
    <ion-range
      min="20"
      max="80"
      step="2"
      (ionFocus)="ionFocus()"
      (ionBlur)="ionBlur()"
    >
      <ion-icon size="small" slot="start" name="sunny"></ion-icon>
      <ion-icon slot="end" name="sunny"></ion-icon>
    </ion-range>
  `
})
export class HomePage {
  ionFocus() {
    console.log('ionFocus');
  }

  ionBlur() {
    console.log('ionBlur');
  }
}

[manucorporat]

This is the expected behaviour of the focus/blur semantics, how about if you are using the keyboard with ion-range? ionFocus/ionBlur events are fired when the component focus/blurs

[JumBay]

Ok I understrand that, it's just its behavior has changed since previous version. I'm using the range as player progressbar, with ionFocus and ionBlur I was able to distinct user changes from component changes. Is there any simple way to detect if the change comes from user or component?

[cegbert-wondersign]

I'm having an issue with the same change. It seems that the meaning of the events has changed from Ionic V3 to V4. What I'm really looking for is an event fired during the end event (where you change the pressedKnob property). It seems this is more or less what ionBlur() fired previously.

I tried using (mouseup) and (touchend) but the problem is those events will only fire if the user happens to release the slider over the element (which doesn't always happen).

[corrantho]

Same issue here, we would like to have an event that is triggered when the final value has been chosen, and then, for example, call a web service. ionChange event is fired for any changes but in our case, we want to call the web service only at the end, when the user has selected the wanted value, not for the intermediary values. This was the behaviour of ionBlur before ionic 4.

[jellebrouwer]

Add global event:

https://stackoverflow.com/questions/35301943/how-to-get-mouseup-outside-of-the-component-in-angular-2

[JumBay]

Since this has changed from ionic v3 to v4 I make it works with touchstart and touchend (didn't try on desktop though) but it would be better to have and ionic event to handle all platform like in v3

[Yedrup]

@JumBay It doesn't work unfortunately on desktop. The thing is I need to do api calls like @AnthonyDJCorrado , a debounce can help but I don't think it's good solution at the end of the day. Range component is pretty cool, that's a little bit sad not having the behaviour expected. It would be nice to have the event triggered when value is selected indeed... I'll test global event suggestion

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.