As in documentation MUI Autocomplete is able to create an option using freeSolo prop. New option appears at the bottom only when the user start typing. Is it possible to move that option at top and make it always visible? I may reorder it with flexbox, so this should not be a problem that much if it can not do it automatically. The problem is the visibility of that option.
I want to open a drawer when it is clicked, so I do not need that typed text information.
That option Add "something" should be always visible, how is it possible?
Related
With Reactjs I'm using Material UI (core v4.12.3, lab 4.0.0-alpha.60) autocomplete which has been set up as a multiselectible drop down and I'm having trouble keeping the menu open. Whenever an option is selected the popup menu closes and I have to manually open it again just to select another option.
I have already set disableCloseOnSelect={true} But it still doesn't work
From trying to create a minimal example i noticed the issue seems to be due to a MaterialTable component as shown in this example here:
https://codesandbox.io/embed/agitated-payne-h5hqk?codemirror=1
In this example if you expand the drop down, and pick one option the menu closes hence you have to re-expand in order to select a second option
However, if you remove the material table/component/toolbar lines (Such that the render method only returns the autocomplete)
<MaterialTable
components={{
toolbar: props => (
After removing the above you would then see the expected functionality is now seen (expand the dropdown, select an option, the menu still remains open for you to select a second option)
I'm not very experienced on the front end side but does anyone have any advice?
The example link is a very stripped down version and I'm not sure how feasible it would be for me to just remove this without breaking something
I'm using the material ui accordion component and I couldn't find a way to stop the panel from collapsing when clicked. My goal is to open and close the panel only by clicking the icon in the accordionsummery component. I found many ways to stop collapsing by click a checkbox for example, but not what I'm looking for.
With default Material-UI package ;
"No" way
Because, on AccordionSummary there is a context mechanism which watches if that Accordion is expanded and produces isExpanded as a value. You need to manipulate core package code the way you wanted, which is a long haul.
Btw, adding onClick function to ExpandMoreIcon gives infinite loop because of that context.
You can go with Additional actions version of Material-UI accordion and hide the checkbox as only viewing the data.
I am using material-UI autocomplete for a project that involves rendering a dynamic array based on what you select from the menu. I am finished with the project and now trying to implement multi-select to make choosing things from the menu easier. When you have everything you want from the menu, you click an "Add" button that takes everything you currently have selected and adds it to a table (and adds the properly formatted text into a query on the side, the goal is to build queries for users without them worrying about syntax). When I was not using multiselect, and only adding one thing at a time to the query, I was easily able to clear the autocomplete field by changing the value prop to null. This prevents users from adding the same fields to the query over and over (when add is clicked the options that were added are popped from the list of options). When using multi the rules seem to change and now changing value directly causes an error. My question is, does anyone know of a way to programattically click the x button built in to material-ui autocomplete fields to clear that text field in an event handler? Or is there any reliable way of clearing that on my end?
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");
I am looking to implement a Tabs component containing lots (7-9) Tab components for a desktop view. I do not want to use the scrollable tabs when it exceeds the viewport width on the Tabs, instead I want the extra Tab items to be in a More dropdown menu just like the example docs show below:
Questions:
What is the intended implementation to achieve this? I actually would like the exact same functionality they describe as well where when I click an item from the dropdown above (for example, books), that will swap positions with the Tab directly to the left of the More dropdown, as shown in this screenshot from the doc:
Specifically, is the More dropdown a Tab component, or a Dropdown Menu component?
When using, how does selecting a tab/option from the More Dropdown work by default? (ex: will the selected tab then get moved to the visible tab portion, just like the screenshots?). Or does this need to be done manually to achieve that result?
Lastly, are there links to any examples of this usage?
Late, but it may help someone.
I was able to achieve dropdown within tabs by using the popover component.
https://codesandbox.io/s/436906013w
It has three tabs - One, Two and Three. Clicking on Tab 'Three' will perform the normal tab change. Clicking on the dropdown arrow next to tab 'Three' will provide the additional options.
It is not an exact solution to the question but can be achieved with a similar approach.
I created logic with MUI List, u can customize it with MUI tabs.
I calculate the width al all items and check if we have enough space, if not I added more button with dropdown and added the rest inside. Be aware that now it does not recalculate if the width or length of items changed
https://codesandbox.io/s/muddy-paper-941ff?file=/src/App.js