baseweb icon indicating copy to clipboard operation
baseweb copied to clipboard

Add contextual parameters to onChange for Select and DatePicker components

Open cobaltwhite opened this issue 5 years ago • 5 comments

<Select /> and <DatePicker /> don't offer the option of accessing name, id and other props once the onChange handler triggers. An event object with this information is accessible in the onChange handler for <Input />.

Feature description

Provide access to these variables for Select and DatePicker. It is needed when the component is being passed handler functions from an ancestor container.

cobaltwhite avatar Aug 20 '20 20:08 cobaltwhite

@cobaltwhite can you please provide an example of what you are looking for?

chasestarr avatar Aug 20 '20 22:08 chasestarr

Sure, I am managing the states of series of baseweb components within a master component including the onChange handlers listed below. These functions are passed on as props to child components where contain baseweb form components such as input, checkbox, select and datepicker. I am trying to capture the name or id from the event in order to update the state at the master level. I can very easily capture the values of input and checkbox listed below, but select and datepicker doesn't seem to have this support.

  const handleInputChange = ({ target: { name, value } }) => {
    setState(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleCheckboxChange = ({ target: { name, checked } }) => {
    setState(prevState => ({ ...prevState, [name]: checked ? true : false }));
  };

cobaltwhite avatar Aug 20 '20 23:08 cobaltwhite

Thank you. The main problem is that onChange handler calls may not be associated with specific DOM events like the simpler input and checkbox components. You can always add additional parameters to the callback like below

function MyComponent() {
  return (
    <Datepicker onChange={({date}) => setState({...prevState, 'datepicker-name': date })}
  );
}

chasestarr avatar Aug 24 '20 17:08 chasestarr

Thank you. The issue I am facing is that I cant't get the target and subsequently 'name' from it. I have a master component with multiple children. Baseweb components are used within the children, so in order to handle the change from a master level by passing it through props, I either have to write a single onChange handler which I did for Input and Checkbox, or one for each component in the case Select and DatePicker as I wasn't able to retrieve the name. Not sure if this is achievable at the moment or I have to resort to the multiple handler temporary hack.

cobaltwhite avatar Aug 25 '20 10:08 cobaltwhite

Is this issue still relevant?

imrishabh18 avatar Aug 02 '21 17:08 imrishabh18