I am looking for a method to set the focus on a specific Component, in this case a TextField, when the Form in question gains the primary focus. I iterated over the available methods of Component and all its subclasses and have not found any. Of course I may have skipped something by mistake.
Related
My react-materialUI app has multiple dialogs, and some of these dialogs are containing the same mui data grid (a list of projects).
Example: a save project dialog. This dialog contains this mui data grid and a mui text field, both as child components.
By clicking on a row in the data grid, I want to set the content of the text field to the value of the selected row.
To accomplish this, I could lift up the value state of the text field and the selectedRow state of the data grid to the save dialog.
somehow I find it hard to understand that a supposedly reusable component isn’t handling their state by itself.
Is lifting states up really the best practice or is there something basic I overlooked?
If some behavior in the data grid should affect the value of the text field, you probably need to lift the state for that text value.
But you might not need to lift the state for the data grid. Instead, you could pass an onSelect prop which you use to set the text value, something like:
<DataGrid onSelect={(project) => setText(project.name)} />
Further reading
The beta React docs have great content on such topics, e.g. https://beta.reactjs.org/learn/thinking-in-react#step-4-identify-where-your-state-should-live
I want to build a simple app like in picture attached with react js, I just cannot find the right idea of:
How to "select" photos(or item) in an application and have the "cart"-like component appear at the bottom when at least one photo/item is selected(and close and deselect all already selected photo/items) and expand the cart-like component at the bottom when clicked to show what's been already selected.
What is the best approach to this?
P.S I'm new to react with a big idea in mind xD
app's view
This question definitely needs more information, but I will try to point you in the right direction. There are hundred of ways to create the UI/functionality you are describing but here is a very generic overview;
The "items" (Img1-6) looks like a grid of ShopItem components, possibly in a CSS Grid / flexbox. Each ShopItem would probably make use of an onClick method to "do something" when it is clicked - this may involve updating a state (using the useState react hook) somewhere which tells you if a ShopItem is checked or not. It could also potentially use a callback method to do something in the parent when the items are checked.
I imagine that each ShopItem may own its own "checked" state or may update a global state (Such as Zustand or Redux) or a Context (React) when it is toggled on and off. The checked state of a ShopItem would also inform the UI of the component.
The "cart-like" component could be looking at the global state/context/callback from the item component, and could change based on its value and how many checked items there are. (Eg/ checkedItems !== 0 ? show : don't show)
This is just one way in which this UI can be built, if you would like a more specific solution, please edit your question to include code snippets and what you've already tried.
Is there a native MUI event for when the pre-selection value changes in a MUI:Select component?
For example, here is my MUI:Select component with 3 options:
I would like an event for when 'Public', 'Restricted' or 'Private' is pre-selected (but not actually selected; i.e. before the onChange() event), either with a mouse-over event or a keyboard up/down event. This is because I have a tooltip card that needs to change dynamically for the user as they interact with the options.
Using this example https://codesandbox.io/s/3iv96 as a guide, I implemented a bespoke solution by capturing the mouse-over event and extracting the text value. I just realized I have forgotten to handle key up/down.
So the question becomes whether I have just missed the obvious, or do I need to roll my own component by wrapping MUI:Select and publishing the events I need.
Looks like out of the box this isn't supported.
Looking at this thread https://github.com/JedWatson/react-select/issues/745 it has to be done manually.
When reviewing possible failures to WCAG success criterion 4.1.2 I encountered a mysterious Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available"(https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F79).
While the article identifies the failure, it does not clarify how to achieve compliance for custom components.
Hence, the question - what is the standard way of exposing focus state via the Accessibility API for custom controls in React?
Does HTMLElement.focus() handle it gracefully, or are any other actions needed?
You can only really call focus() on an element which has a tabindex attribute. (Exceptions to this rule are 'native' UI elements such as button, a and input, which are focusable by default).
If you want to focus() something without including it in the tab sequence, use tabindex="-1".
For components, you'll have to choose carefully where to put the tabindex. Typically you put this attribute on the element which carries the semantics. (i.e. if you want to focus on a <h1>, use <h1 tabindex="-1"> rather than on any wrapper elements or descendants). This might be more tricky with components, especially if the component is a composite widget, but that's another story.
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