How to select all input values (digits) in lightning:input when user clicks on input (on onfocus)

Question

The idea is to get rid of double click in the input or drugging mouse to select all digits. Like 99% of User do these redundant actions. I'm one of them as I need to test stuff and it makes me crazy to not being able to have it selected right away.

Aura Component.

<lightning:input 
  aura:id="percentage"
  type="number" 
  name="percentInput" 
  disabled="{!v.percentInputDisabled}" 
  label=" %" 
  value="{!v.percent}" 
  formatter="percent-fixed" 
  step="1"
  onchange="{!c.handlePercentChange}"
  variant="label-inline"
  onfocus="{!c.handlePercentOnfocus}"
  tabindex="1"
/>

I found a lot of version of how to do that in the js controller. One of the version:

handlePercentOnfocus : function(component, event, helper) {
    let inputField = component.get("v.percent").getElement();
    inputField.setSelectionRange(0, inputField.value.length);
}

None of it works.

Maybe someone has working code. Please share.

EDIT1:

<lightning:input 
  aura:id="percentageAId"
  type="number" 
  name="percentInput" 
  disabled="{!v.percentInputDisabled}" 
  label=" %" 
  value="{!v.percent}" 
  formatter="percent-fixed" 
  step="0.01"
  onchange="{!c.handlePercentChange}"
  variant="label-inline"
  onfocus="{!c.handlPercentOnfocus}"
  tabindex="1"
/>



handleDepositPercentOnfocus : function(component, event, helper) {
    const inputField = component.find("percentageAId");
    console.debug("\n --- CreateXDialogController.js - handlePercentOnfocus - inputField: ", inputField);
    inputField.getElement().select();
}

The console outputs me a bunch of functions, but none of them are 'getElement()'.

addHandler: function value()​
​addValueProvider: function value() ​
blur: function value()
​checkValidity: function value()​
destroy: function value()​
focus: function value()​
get: function value(name)​
getEvent: function value()​
getGlobalId: function value()​
getLocalId: function value()​
isInstanceOf: function value() ​
isRendered: function value()​
isValid: function value()​
reportValidity: function value()​
set: function value()​
setCustomValidity: function value()​
showHelpMessageIfInvalid: function value()
​toString: function value()

Answer 1

handlePercentOnFocus : function(component, event, helper) {
 let percentage = component.find("percentageAId");
 const value = percentage.get("v.value");
 
 percentage.set("v.type", "text");
 
 percentage.set("v.selectionStart", 0);
 percentage.set("v.selectionEnd", value.length);
 
 percentage.set("v.type", "number");
}