Quantcast
Channel: ReScript Forum - Latest posts
Viewing all articles
Browse latest Browse all 1784

Handling nullable for parameter of @external make binding - HeadlessUI Combobox

$
0
0

Hi,

I am trying to bind HeadlessUI’s Combobox but am having an issue when the nullable prop is set to true as the onChange function will have a null passed in and crash the client.

My current binding is

  @module("@headlessui/react") @react.component
  external make: (
    ~\"as": React.element=?,
    ~disabled: bool=?,
    ~value: 'a=?,
    ~defaultValue: 'a=?,
    ~by: string=?,
    ~onChange: _ => unit=?,
    ~name: string=?,
    ~nullable: bool=?,
    ~multiple: bool=?,
    ~className: string=?,
    ~children: comboboxState => React.element=?,
  ) => React.element = "Combobox"

I’ve tried

@return(nullable)
~onChange: _ => unit=?

Currently my workaround in the calling module is

  let onChange = (selected: Js.Nullable.t<ComboBox.opt>) => {
    if Js.Nullable.isNullable(selected) {
      setSelected(_ => "")
    } else {
      Js.Nullable.iter(selected, (. selected) => setSelected(_ => selected.value))
    }
  } 

This logic would have to be applied to the displayValue function in Combobox.Input as well. I’m trying to avoid handling null | undefined at every calling component by seeing if there is a way to bind the parameter onChange to respect @return(null_to_opt) or @return(nullable). I’ve seen this done in external function bindings but never in a prop. Thanks for any input!


Viewing all articles
Browse latest Browse all 1784

Trending Articles