I need redux-form component to select one of several - reactjs

Imagine a page where you are asked to choose your favorite sport.
But the sports are not listed in the drop-down list, but in the form of grids div.
You can choose only one sport. And the choice should be stored in redux-form store.
What components of redux-form can I use?
Maybe there are ready-made solutions?

I guess you can achieve what you're looking for by using a group of checkboxes. Simply style the label attribute with CSS and hide the checkbox.

Related

React Js Autocomplete Multi select example

I'm pretty new to React Js, I have a requirement for building AutoComplete Multiselect dropdown.
Despite looking around for lot of examples,
I was suggested not use any third party libraries. And pretty
clueless how to start and proceed further.
My requirements are
Have an input text box for typing names.
Display sugggested name with checkbox.
Upon checking the names, they must be display in an with an 'X' symbol(remove item)
If I uncheck the name from the multiselect dropdown, it must be removed from the li.
If I Click the 'X' it should be removed from the li and uncheck the item from dropdown list.
And lastly , I need to display the selected items in the input fields like
I've been trying to implement this functionality but figure out how.
Can anyone please provide some reference and any guidance in implementing this functionality or any examples. It would be a great help.
Thanks
I'm not sure why the recommendation against third party libraries. These component can get complicated fast.
I recommend you use a third party. Don't reinvent the wheel!
Something like https://github.com/JedWatson/react-select will do what you want. It has been around for years and has over 300 contributors and 2 million weekly downloads.

How can I find and click a button that has no text using React Testing Library?

Many React Testing Library examples show how to find and click a button using the getByText query, as in:
fireEvent.click(getByText("Create"))
OR
userEvent.click(getByText("Create"))
However, it's common to have buttons with no text and only SVG icons, like Material UI's icon buttons or floating action buttons. Is there a recommended way to query for and click buttons like these? For context, I'm using the higher-level events provided by the companion user-event library.
For icon buttons, add an aria-label attribute like below:
<button aria-label='edit'>
<edit-icon />
</button>
Then in your test, pass the accessible name when calling getByRole()
screen.getByRole('button', {
name: /edit/i
})
From the docs:
The accessible name is for simple cases equal to e.g. the label of a
form element, or the text content of a button, or the value of the
aria-label attribute.
There are several ways to query an element, without seeing your hierarchy of elements, it's hard to say. But, there are several ways to query an element, an alternative to using getByText() could be getByRole('button'). If you want to add a data-testid to the element you could use getByTestId(). There are some more available queries found here: https://testing-library.com/docs/dom-testing-library/api-queries
There are a bunch of different ways to do it, including everyone's favorite fallback, data-tested. But if you're using Material UI, you might be looking for the most "MUI" way to do this. Two ideas:
The MUI documentation shows all its buttons wrapped with a label element with an htmlFor property. You could do this and then use getByLabelText()
Your icon buttons probably have (and should!) a tooltip, and the tooltip text is probably coming from a title property. Then you can get the button with getByTitle().
For me non of above answers works, what is worked for me is:
screen.getByRole('button', { name: /<icon-file-name>/i });
In my case the button with only svg file.
The best possible way of finding an element is to simulate the most User oriented approach. So probably User expects the role button and then searches for an icon in your case. That's where semantic HTML plays a role for elements structure inside your component.
MUI buttons also implement a name attribute for some icon buttons used inside another component e.g. Select and I strongly recommend using this attribute for testing purpose.
Please remember that, your tests should be unaware of implementation, so identification should rely on name, role, label and other "natural" attributes. But if that is not possible using data-testid should be your last resort.
A very good overall approach (not only for icon buttons) is to specify a name property alongside role in getByRole query:
const listOpenButton = screen.getByRole("button", { name: /open/i });
Also a data-testid approach:
const listOpenButton = screen.getByTestId("myButtonId");

React checkbox component: Where should I keep state changes?

In react-table, I've made a custom drop-down-menu component that appears when user clicks on a header of a column.
When user clicks on the option "Choose columns", a modal appears with checkboxes options where user can select which columns to show or hide.
This modal with the checkboxes options is in the drop-down-menu component. The problem is I can not figure out which is the best way to handle state changes. Should I keep state changes on both components (table component and drop-down-menu component)? Should I use redux for that? I'm going to use many tables, so the total number of columns will be very big. I'm really confused about all this.
You should have one source of truth. As the table will need this information, it should be saved in the table and passed to the drop-down-menu component.
Checkout this codesandbox example.
Well if you want to make your checkbox reusable component, which you should, then you will have to keep the state in your checkbox component and expect an onChange event handler from wherever you want to use that checkbox component.

Html element set autofocus dynamically in React

I have two sibling component.
one component contains textbox,checkbox,dropdown controls in it.
another component contains Kendo Grid.
whenever user clicks on grid row i want to set focus on one of the element in above
component which include textbox.
Approach used:
1.I don't want to use ref as i have multiple controls in one component.
2.I have dynamically added autofocus attribute to input element.
Disclaimer: I am not sure if these solutions are best practices in React
There are 2 approaches for this, both using refs, but with smarter implementations:
Create a wrapper around the inputs and assign refs to it. Whenever you want to focus on an input, simply use wrapperRef.querySelector('[name=yourInput]). Working example: https://codesandbox.io/s/195kkrpvq
Create an object which stores the name of the fields as keys and their refs as values. Simply use this.yourRefsObject[yourInputName].focus() to focus on an input. Working example: https://codesandbox.io/s/61jl7q9v43
Again, I am not certain whether these implementations are best practices, but they should do the job for now

What is the difference between "Drop Down Menu" and "Select Field" in Material-UI

It seems that these two instances duplicate each other: Drop Down Menu and Select Field. Both follow Google Material Design specs for menus. The difference is not that obvious at first sight. Why do they provide two similar components?
Select Field has more features that deal with form fields. onChange events, hintText, floatingLabelText. Drop Down Menus don't have those features.
DropDownMenu is for menus. Imagine a dropdown in the top right with your name 'Green v', you tap it and you see, 'Settings', 'Help', & 'Logout'. Even though it allows you to change the value prop onChange if you want (you could make the menu button say 'Settings v'), that's not what it's supposed to be for. It's actually not intended for use with forms at all, it's just for showing a list of options. Visual: https://material.io/guidelines/components/menus.html#menus-usage
SelectField is for filling in form data, and showing the selected item in the field.

Resources