I am unable to make a focus inside a searchbox of Office UI Fabric React component.
I have a DialogBox where I am having a searchbox. This dialog box I trigger on button click and I wants the focus to be inside the searchbox once the dialog is there.
I have tried the mostly what is mentioned in the documentation of Office UI Fabric.
So, what I have tried uptill now:
private _searchBoxRef = React.createRef<ISearchBox>();
My SearchBox component looks like:
<SearchBox
componentRef={this._searchBoxRef}
placeholder="Ask a question"
iconProps={{ iconName: 'Chat' }} />
And in the componentDidMount hook:
this._searchBoxRef.current.focus();
I am trying to make a focus inside the searchBox.
I have followed the documentation under the link:
React Guidelines for Ref Usage
Does someboby have a clue what I am doing wrong here or something I am missing??
So, I found the answer after trying out few things.
The problem was, even though I was trying to make focus inside componentDidMount(), I found that the DOM was still not ready and my searchbox inside my modal was not there.
Two things could be done here,
Either, wait for some time with SetTimeout and then tried to make focus
Can use componentDidUpdate, if setting the state which is re-rendering the component. This might also give hickups if DOM is not ready, so keep this in mind.
Hope this will help someone.
Related
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
I want to be able to click on one of the bars to open a new window, but it seems like the tremor library doesn't have the functionality to have some kind of onclick. Could someone help me with that?
my barchart code
I have tried changing it from a functional component to a class component so I can use this.state, but I did not manage to make it work.
In React Native, I would like to achieve the following outcome (example):
example1 example2
On Long Press of the image (or touchableOpacity), I hope to display an overlay view of some extra information (could be images or text). The information disappears when the finger leaves the screen. I was thinking if it is something related to overlay view and setState, but I could not find the function where the view only appears during long presses. Is there a way to achieve this? Or is there a module that could provide a solution?
Any help would be appreciated!
If you are using the latest react native version you can use the onPressOut functionality of a pressable component: https://reactnative.dev/docs/pressable.
Trigger the show overlay with the onLongPress (or onPressIn but it's not a good UX) function and then trigger the hide overlay with onPressOut function.
For the overlay I suggest you a cool library like:
https://reactnativeelements.com/docs/tooltip/
Use case: I have a client who'd like on their homepage to have a gif version of a video that, when clicked, opens up a full screen video player. How can I manage this? I've been building the site in the NextJS framework.
I'm looking to do something like this but instead of autoplaying an mp4, auto loop a gif of the video and, upon clicking the gif, play mp4 in fullscreen.
Any help would be greatly appreciated - I've never really messed with videos in React.
There is no one way to do this but the beauty of React are components. You are definitely going in the right direction. I would actually do two separate components, one for background and one with the video player. That is cleaner and good practice to separate concerns in code.
Simply swap components conditionally, as in this simplified example;
if(onclick) {
render (
<Player />
) else {
<Index />
}
}
You can very well use state to set the conditions. The only problem in React is that components technically do not share state but on the other hand, the "background component" only needs to know if its in the foreground and if it receives an onClick event. The video component only needs to know about its own onClick to for it to disappear again. So two separate event handlers is no issue in this very specific case.
i would create a react state and set it to false
then onClick of the gif i will update the state to true
then have a conditional statement to show the video in fullscreen when the state turns to true
and set the state back to false when video is removed from full screen
I'm trying to implement a pop over that can show on any screen in the web application, using React+Redux+React router
The popover is a container, that is triggered by the application state.
But how is the best practice to do such a thing, since the background is transparent, and it should just show on any screen that is currently presented.
Should it be on top of the router, on hidden, and unhide on present? I can seem to find any example for this senario...
Popover can sit inside Root component, something like this.
<App>
<HomePage />
{shouldShowPopOver && <PopOver />}
</App>
You can dispatch { type: TOGGLE_POPOVER } action anywhere, to alter shouldShowPopOver. The styling(transparent, whole page etc) should be done through css.
You ca use react-bootstrap popover. Checkout the link
https://react-bootstrap.github.io/components.html#popovers
I'm using react-modal component and it works pretty well.
I have used react-modal-dialog before and it works like a charm! The benefit of this library is that you can define your <Modal> component near where the source of trigger is (some button?) and it is easy to trace the condition that determines whether the modal is displayed since it is near the trigger source.
Using this library, technically it does not matter where you put the modal component among your markup as the CSS of the modal makes it appear above all other elements.