Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add contextual parameters to onChange for Select and DatePicker components #3671

Open
cobaltwhite opened this issue Aug 20, 2020 · 4 comments
Open

Comments

@cobaltwhite
Copy link

@cobaltwhite cobaltwhite commented Aug 20, 2020

<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.

@sandgraham sandgraham changed the title Access to props (name, id) onChange for Select and DatePicker components Add contextual parameters to onChange for Select and DatePicker components Aug 20, 2020
@chasestarr
Copy link
Collaborator

@chasestarr chasestarr commented Aug 20, 2020

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

@cobaltwhite
Copy link
Author

@cobaltwhite cobaltwhite commented Aug 20, 2020

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 }));
  };

@chasestarr
Copy link
Collaborator

@chasestarr chasestarr commented Aug 24, 2020

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 })}
  );
}
@cobaltwhite
Copy link
Author

@cobaltwhite cobaltwhite commented Aug 25, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.