Why maxLength does not work?

#1

Hi all

I have the following component:

type state = {value: string};

type action =
  | OnKeyUp(int, string);

let allowedKeyCode = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57];

let component = ReasonReact.reducerComponent("NumberInput");

let make = (~name: string, ~value: string => unit, ~maxLength: int, _children) => {
  ...component,
  initialState: () => {value: ""},
  reducer: (action, state: state) =>
    switch (action) {
    | OnKeyUp(keyCode, key) =>
      List.mem(keyCode, allowedKeyCode) ?
        ReasonReact.UpdateWithSideEffects(
          {value: state.value ++ key},
          (self => value(self.state.value)),
        ) :
        ReasonReact.NoUpdate
    },
  render: self =>
    <input
      type_="text"
      maxLength=maxLength
      name
      value=self.state.value
      onKeyUp=(
        event =>
          self.send(
            OnKeyUp(
              ReactEventRe.Keyboard.keyCode(event),
              ReactEventRe.Keyboard.key(event),
            ),
          )
      )
    />,
};

I use it like:

<NumberInput name="amount" value=(v => self.send(AddAmount(int_of_string(v)))) maxLength=5/>

maxLength does not work at all why?

Thanks

#2

I thought it may not be included in the bindings, but looking here it’s included.

Can you share an error or more detail about why and where (in the <input> tag, or when consuming the <NumberInput> tag?) it’s not working?

#3

onKeyUp will be applied before browser validations happens (including maxLength). So either you use onChange event or have the validation code in the reducer to prevent this from happening