How to use HtmlInputElement (focus, select) ? about bs-webapi-incubator HOT 5 OPEN

Oh right, because the library had to be updated to work with some ReScript incompatibilities and this bug was introduced around the same time.

You could use external instead of raw, if you prefer, similar to how webapi does it

[@send] external focus: Dom.element => unit = "focus";
[@send] external select: Dom.element => unit = "select";

and then focus(input) will compile to input.focus().

from bs-webapi-incubator.

It looks like the type of ofElement has changed to Webapi__Dom__Element.t => option(Dom.htmlElement) instead of option(Dom.htmlInputElement).

And it's another bug from #182 :
https://github.com/reasonml-community/bs-webapi-incubator/pull/182/files?file-filters%5B%5D=.re#diff-f6590c311eac02db4a8591dfe7b1a4c232207269ed2d71105f8407ad4c5ba34dL13-R4

The type annotation on let ofElement: Dom.element => option(t_htmlElement) has been lost (I'm not even sure if it would be valid with the new implementation) so the function becomes effectively useless in scenarios where it's inherited by other modules.

cc @yawaramin

from bs-webapi-incubator.

Hello, any progress of this one? We've run into the same issue trying to access input's value in tests.

from bs-webapi-incubator.

Downgrade your version? It has been nearly a month and the maintainer hasn't responded 🤷‍♂️

from bs-webapi-incubator.

With 0.18, 0.17, 0.16 i have the same problem. With 0.15.9 works - but no with bs-platform 8.3.1. With bs-platform 8 and bs-webapi 0.15.9 i have an error:

We've found a bug for you!
  /home/leon/public_html/client/react/node_modules/bs-webapi/src/Webapi/Webapi__Dom/Webapi__Dom__DomStringMap.re:11:5-7
  
   9 │ let set = (key, value, map) => set(map, key, value);
  10 │ let unsafeDeleteKey: (key, t) => unit =  
  11 │   [%raw (key, map) => "delete map[key];"];
  12 │   
  
  bs.raw can only be applied to a string

I made workaround to have working with bs-platform 8 and newest bs-webapi, i just created my own functions using %raw (maybe it will be useful for someone):

let focus: Dom.element => unit = [%raw {| domElement => domElement.focus() |}];
let select: Dom.element => unit = [%raw {| domElement => domElement.select() |}];

[@react.component]
let make = () => {
  let inputRef = React.useRef(Js.Nullable.null);

  let handleSelect = _event => {
    let element = inputRef.current->Js.toOption;

    switch (element) {
    | Some(input) =>
      focus(input);
      select(input);
    | None => ()
    };
  };

  <>
    <input
      className="new-leon-input"
      type_="text"
      value="abcd"
      onChange={_ => ()}
      ref={ReactDOMRe.Ref.domRef(inputRef)}
    />
    <button onClick=handleSelect> "select"->React.string </button>
  </>;
};

But of course it would be much better to fix this library.

from bs-webapi-incubator.