I'm trying to find a reliable way to find out if the slate editor is currenty focused or not. The editor should be in a focused state even when nested elements are selected.
I've tried
ReactEditor.isFocused(editor)
But am seing really inconsistent results. Often this will yield true even if the editor is not selected. Also, no rerender seems to be triggered when the editor focus changes.
Is there a reliable way to do this?
Have you tried useFocused hook from Slate?
https://docs.slatejs.org/libraries/slate-react#usefocused
Related
I tried to update Mui from version 5.10 to 5.11.7, and one of the changes included was adding a SlotProps UI. The slotprops is broken somehow, and is getting inserted into the DOM of all mui modals instead of correctly giving them a backdrop - as a result, modals can't be closed unless there's some kind of close button in them to use manually.
I'm having trouble even approaching how to debug this. Any ideas would be appreciated.
This error is present in the console and the problem is because of this enter image description here getting added to the DOM, but I can't find results googling for this and I'm having trouble debugging it. It happens even if I insert a totally unstyled modal with nothing going on into a page.
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.
I just wanted to try and see how Downshift could be used as a list filter, ie the "drop down" menu doesn't close.
I found that fairly easy, but then found it pretty difficult to overcome the default behaviour that when you click an item, the input is populated with its value.
I've create an example of how I would tackle this (see below), but it seems complicated. Ideally I would've liked to just do a prevent default type thing on the click handler and provided my own, but I didn't see an obvious way of doing that. What is the Downshift recommended way?
https://codesandbox.io/s/laughing-leavitt-pyruxj?file=/src/downshift/ordered-examples/02-complete-autocomplete.js (click the module preview button)
I started by overriding the click behaviour, but then found I also needed to do blur and others, and i didn't want to miss an edge case.
You should use the itemToString prop and return an empty string.
<Downshift
...
itemToString={() => ""}
>
I made a custom component that doesn't rely on Input (it is actually showing a path selection within a tree)
I want to integrate this component in my application with the very same look and feel than any other input component. What I actually want is the floating label that takes place within the editor if the value is null or undefined, and floats above the editor if the editor has a value.
I can't find any way that permits to achieve this on components that are not based on an Input. Am I missing something in material ui documentation?
Here is the code sandbox of my development: https://codesandbox.io/s/treeviewselect-dj4j5?file=/demo.tsx
Edit: the boolean property shrink that should help to do the trick, but still, the position of the label is still off.
Edit2: it seems that the related control must have a height of 64px for the position of the label to be fine. Needs to pilot the whole behavior depending on the value. Will post the fully corrected codesandbox later.
I want to create a custom Picker component, with the same functionality as the iOS Picker. The problem is that I want a completely different UI, basically a horizontal scrollview with two methods of input:
First one is easy, clicking one item results in that item being selected. The second way of inputting should be by scrolling, where the center one gets selected (like the iOS Picker). That's where I'm stuck.
While planing, I thought about using react-native-snap-carousel, my problem with that is that it needs a fixed itemWidth, which isn't suitable for text as the elements.
I also thought about somehow enabling snapping for my List, but that seems only to be possible with pagingEnabled = true, which isn't suitable for my use case.
What else could I try?
Thank's to anyone who is willing to help!