OnBlur closing react component if clicked inside - javascript

I have created a React component using Material UI as below
<Popper
open={open}
anchorEl={anchorRef.current}
onBlur={handleToggle}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input type="text" name="Student" onChange={getStudent}></input>
</Popper>
In the above component i have MenuList and TextField. I tried to add onBlur={handleToggle} thinking that, it will close the component if clicked outside of it but its closing even when i am trying to add text in TextField using onChange={getStudent}, Why is it happening and how to close Component only if clicked outside of it? Thanks.

You can use ClickAwayListener component to detect whether the user is clicking outside of the Popover area.
<ClickAwayListener onClickAway={() => setOpen(false)}>
<span>
<Popper
open={open}
anchorEl={ref.current}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input
type="text"
name="Student"
/>
</Popper>
<Button variant="outlined" onClick={() => setOpen((o) => !o)} ref={ref}>
Nothing
</Button>
</span>
</ClickAwayListener>
Live Demo

Related

React Syncing element from Virtual DOM with element from HTML DOM

I have a react component which contains a 3D animation with playback controls (pause/play) inside a HTML page and I need the controls to be synced with some buttons outside the react component.
The controls in react are implemented like this
<Button color='red' onClick={() => { setDataPlayback(false); }} > <Icon name='pause' /></Button>
<Button color='red' onClick={() => { setDataPlayback(true); }} > <Icon name='play' /> </Button>
and the buttons in the html page are
<div id="btns">
<button id="html-button-pause" onclick="python_function_pause()"></button>
<button id="html-button-play" onclick="python_function_play()"></button>
</div>
So whenever I press a button in react, I want it to trigger a click on the html button.
I think this should work:
<Button color='red' onClick={() => { setDataPlayback(false); python_function_pause(); }} > <Icon name='pause' />
And the same for the other button. You can invoke click of an HTML element programmatically using .click() function. You can read more about it here.

How to place two icons in a button

I am trying to place two icons one is related to wordDocument and other is related to download icon on and button but one icon is overriding another icon, this is the code:
import { FileWordOutlined, DownloadOutlined } from '#ant-design/icons';
return (
<Fragment>
<Button
type="primary"
style={{ width: '30%' }}
onClick={() => {
authProvider.getIdToken().then(token => {
downloadFile(
`${process.env.REACT_APP_API_URL}/api/Projects/${projectNumber}`,
token.idToken.rawIdToken
);
});
}}
icon={((<FileWordOutlined />), (<DownloadOutlined />))}
size="small"
>
Basis of Design
</Button>
</Fragment>
);
and the button image is looking like this right now
I am looking to place icon <FileWordOutlined /> on the right side of the text Basis of Design and <DownloadOutlined /> is on the left side of the text.
Could anyone please let me know is there any way to achieve this?
The icon props take only one component. So you won't be able to pass two-component there.
There are two ways to get 2 icons.
Remove the icon prop and use the 2 icon Component,for ex,<FileWordOutlined />, <DownloadOutlined /> as children to the Button prop.
<Button type="primary">
<FileWordOutlined />
Basis of Design
<DownloadOutlined />
</Button>
If you want to use the icon prop you use it like this:
<Button
type="primary"
icon={<FileWordOutlined />}
size="small"
>
Basis of Design
<DownloadOutlined />
</Button>
What you are doing isn't working because you are setting icon to the returned value of ((<FileWordOutlined />), (<DownloadOutlined />)), which is <DownloadOutlined />.
You can omit icon and put the icons and the button text inside Button instead:
<Button
type="primary"
size="small"
>
<DownloadOutlined />
Basis of Design
<FileWordOutlined />
</Button>
demo
If you want to get 2 icons then create icon prop like this:
<Button icon={your primary icon}>
{text}
{extra icon}
</Button>
So the Element would look like
<My Button
icon={<icon name/>}
text={text}
extra icon={<extra icon name/>}
/>

Popover on step in Ant Design

Is it possible to get a popover working on a step in Ant Design?
I'm trying to use this:
<Steps direction="horizontal" style={{ marginTop: "20px"}}>
<Popover
placement="topLeft"
title={<span>Initialised</span>}
content={<React.Fragment><Paragraph><Text>Test</Text></Paragraph></React.Fragment>}
trigger="hover"
>
<Step
status="initialised"
title="Initialised"
description="."
/>
</
Popover>
No errors are generated and the page renders, but the on hover doesn't work to display the popover.
Use icon prop in component and wrap with component
<Step
status="initialised"
title="Initialised"
description="."
icon={<Popover placement="topLeft"
title={<span>Initialised</span>}
content={<React.Fragment><Paragraph><Text>Test</Text></Paragraph></React.Fragment>}
trigger="hover">
<Icon type="user"/></Popover>
</Popover>}
/>

React select can not overlay react modal

I have a react modal and inside it I have react-select. How can I make select overlay the modal because some of my options in the botttom of modal did not appear ?
I tried z-index but it did not work.
<MainSelect
className="select"
id={name}
isMulti
isRtl={!locale.ltr}
components={{ Option: OptionComponent }}
styles={this.customStyles}
theme={this.customTheme}
options={options}
value={value}
placeholder={placeholder}
onChange={this.handleChange}
onBlur={formik.onBlur}
onMenuOpen={() => {
if (setScroll) setScroll();
this.props.formik.setStatus("onMenuOpen");
}}
/>
The issue here is the default style of React Modal i.e overflow:hidden. And React-modal allows you to easily override default styles. Just add overflow: visible to the modal's CSS.
<Select
menuPortalTarget={document.body}
styles={( menuPortal: base => ({ ...base, zIndex: 9999 }) )}
/>

How to use text instead of Icon for react-toolbox menu?

I am using react-toolbox menu for my website. Based on the example given in the documentation React-toolbox menu, I can only use icon as my menu. How can I use text for the menu instead?
Example of what I want to do:
When I click the blog text which is a menu, the menuItem will be shown.
Is it possible to do this?
just remove icon property from MenuItem component
<IconMenu icon={<div>blog</div>} position='topLeft' menuRipple>
<MenuItem value='download' caption='Download' />
<MenuItem value='help' caption='Favorite' />
<MenuItem value='settings' caption='Open in app' />
<MenuDivider />
<MenuItem value='signout' icon='delete' caption='Delete' disabled />
</IconMenu>
You can pass an element to the icon property like that:
<IconMenu icon={<div>Menu</div>} position='topLeft' menuRipple>
In case someone else has the problem, the solution is to use Menu component instead of IconMenu. Like this :
const [menuActive, setMenuActive] = useState(false);
return (
<div style={{ position: 'relative' }}>
<Button label='Actions' onClick={() => setMenuActive(!menuActive)} />
<Menu position='topRight' active={menuActive} onHide={() => setMenuActive(false)}>
<MenuItem value='download' caption='Download' />
<MenuItem value='action' caption='Action' />
</Menu>
</div>
);

Categories