3

The BluePrintJS React InputGroup component is great and convenient for modern user-interface. But unfortunately the React component do not allow access to the <input> element inside.

I need to access the input element for 2 main reasons :

  • if I have 50 InputGroups in my form, I don't want to write 50 OnChange() callbacks. When the user finishes all inputs, I want to get all InputGroup.value(), which is not possible (it is possible with regular input element thanks to HTMLInputElement.value, but InputGroup does not allow accessing internal input)

  • At form displaying, I need to focus on first field. InputGroup has no function focus(), while HTMLInputElement has one.

Briefly there are 2 functions missing in InputGroup : GetValue() and Focus() , and I cannot see why they are missing. Any suggestion will be greatly appreciated. Thanks a lot.

Riccardo Cohen
  • 133
  • 1
  • 9

2 Answers2

5

I found the way of getting the input ! with :

inputRef={(input:HTMLInputElement) => {
    this.logininput=input;
}}

(didn't see it at first time).

Now I have the input object, I can set focus at "didmount", and I can get the value with logininput.value.

Thanks

Riccardo Cohen
  • 133
  • 1
  • 9
  • 1
    I hope in new version of blueprintjs, all form elements will have this feature (i.e. accessing the object and its data out of change event), I had problems in particular with datepickers and timepicker – Riccardo Cohen Mar 22 '18 at 07:34
0

Slightly different variation but this works too:

inputRef:(input:HTMLInputElement | null) => {
    // your code here
    return input;
}
}}

just be aware that code runs when you just render the component, depending on your usage, to me happens when I click the child control on a select.

In my case, I just wanted to modify an input that works for text search on a select.

pedrommuller
  • 15,741
  • 10
  • 76
  • 126