When clicking on the Material Ui select it scrolls to top of the page every time within iframe.
I have created on react application which has select option for month and year. when i click on the select button it auto scrolls to the top of the page which is very annoying
This issue is occurring when i am loading react app within iframe only.
without iframe it is working fine
<Select
variant="outlined"
IconComponent={KeyboardArrowDown}
labelId="demo-simple-select-label"
style={{ marginRight: "10px", fontSize: Theme.typography.caption.fontSize}}
placeholder={Content?.expiryMonthPlaceHolder}
id="expirationMonth"
value={expirationMonth}
label="MM"
className={classes.cardmonth}
// expirationMonth ? classes.cardmonth : classes.cardmonthEmpty
// }
onChange={e => {
setExpirationMonth(e.target.value);
}}
>
{months.map(month => (
<MenuItem key={month} value={month} autoFocus={true} style={{ fontSize: Theme.typography.caption.fontSize }}>
{month}
</MenuItem>
))}
</Select>
Related
Im building a web chat app in next.js and i have a emoji picker button that when its clicked the menu of emojis appear.The thing is that in order to the user sees the menu of the emojis he has to scroll down.I have tried scrollIntoView() but it doesnt seem to work,possibly im doing something wrong.
<EmoticonContainer >
{showEmojis && (<Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>)}
</EmoticonContainer>
<InputContainer id="container" >
<IconButton onClick={() => {setShowEmojis(!showEmojis),()=>document.getElementById('picker').scrollIntoView(true)}}>
<EmojiEmotionsIcon style={{ color: 'purple' }} fontSize='inherit' />
</IconButton>
<Input style={{fontFamily:"Roboto",fontSize:"12px"}} onKeyUp={()=>ChangeSendIcon()} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} value={input} onChange={e=> setInput(e.target.value)}/>
<div>
<IconButton id="send" onClick={sendMessage} style={{ color: 'purple',display:'none' }} disabled={!input} type="submit">
<SendIcon></SendIcon>
</IconButton>
<IconButton style={{ color: 'purple'}} id="record" onMouseUp={()=>record()}>
<MicIcon ></MicIcon>
</IconButton>
<IconButton style={{ color: 'purple',display:"none" }} onClick={()=>stop()} id="stop" >
<StopIcon></StopIcon>
</IconButton>
</div>
</InputContainer>
You are conditionally rendering the picker Component and the showEmojis state is also being set in the same click listener. State updates may be async and you are calling scrollIntoView on element which doesn't exist.
In order to scroll into view once the picker is opened, you need to call scrollIntoView from useEffect once it is opened.
useEffect(() => {
if(showEmojis) {
document.getElementById('picker').scrollIntoView(true)
}
} , [showEmojis])
I am working with a form to change the user's name, email and password.
All elements are from 'react-native-elements', Button, Icon and the Input.
This is displayed in a Modal created with Overlay of 'react-native-elements'
The name and email fields work correctly, they only have 2 "Inputs" each field, but the change password field has 3 "Inputs":
' CURRENT PASSWORD' , 'NEW PASSWORD' AND the ' CONFIRMATION ' of the new password.
The first screenshot is of the form with two fields
In the second screenshot, the one with 3 fields in the form, for some reason, the third "Input" of 'confirmation' of new password, is shown outside the Modal, which makes it difficult to distinguish it and causes problems when trying to change the password.
.
This prevents me from moving forward with the project until I fix it, as it is a very bad user experience.
It has some very simple styles, and I spend the whole weekend trying to solve this without finding an explanation.
Because I know that the third "Input" is Outside the Modal ?
I hope this code is enough for you to tell me what I'm doing wrong
This is the Modal component
<Overlay
isVisible={isVisible}
overlayStyle={globalStyles.overlay}
onBackdropPress={() => setVisible(false)} // when we press outside, we exit the MODAL
>
***Styles***
overlay: {
height: 200,
width: "90%",
backgroundColor: "#fff",
borderColor: "#22aabe",
borderWidth: 2,
borderRadius: 10
},
// and here I show the form
return ( // show the form on the screen
<View style={globalStyles.viewChangeEmail}>
<Input
placeholder="Current password..."
containerStyle={globalStyles.inputChangeEmail}
defaultValue={currentPassword}
onChange={(e) => setCurrentPassword(e.nativeEvent.text)}
errorMessage={errorCurrentPassword}
password={true}
secureTextEntry={!showPassword}
rightIcon={
<Icon
type="material-community"
name={showPassword ? "eye-off-outline" : "eye-outline"}
iconStyle={{ color: "#c2c2c2" }}
onPress={() => setShowPassword(!showPassword)}
/>
}
/>
<Input
placeholder="your new password..."
containerStyle={globalStyles.inputChangeEmail}
defaultValue={newPassword}
onChange={(e) => setNewPassword(e.nativeEvent.text)}
errorMessage={errorNewPassword}
password={true}
secureTextEntry={!showPassword}
rightIcon={
<Icon
type="material-community"
name={showPassword ? "eye-off-outline" : "eye-outline"}
iconStyle={{ color: "#c2c2c2" }}
onPress={() => setShowPassword(!showPassword)}
/>
}
/>
<Input
placeholder="Ingresa tu confirmación de nueva contraseña..."
containerStyle={globalStyles.inputChangeEmail}
defaultValue={confirmPassword}
onChange={(e) => setConfirmPassword(e.nativeEvent.text)}
errorMessage={errorConfirmPassword}
password={true}
secureTextEntry={!showPassword}
rightIcon={
<Icon
type="material-community"
name={showPassword ? "eye-off-outline" : "eye-outline"}
iconStyle={{ color: "#c2c2c2" }}
onPress={() => setShowPassword(!showPassword)}
/>
}
/>
<Button
title="Change Password"
containerStyle={globalStyles.btnContainerChangePassword}
buttonStyle={globalStyles.btn}
onPress={onSubmit}
loading={loading}
/>
</View>
)
viewChangeEmail: {
alignItems: "center",
paddingVertical: 10
},
inputChangeEmail: {
marginBottom: 10
},
btnContainerChangePassword: {
width: "95%"
},
The overlay height is set with fixed value. i:e 200px. Change the overlay height value to auto, so it will take up the height as required based on the content the overlay has.
Also, set the max-height to the overlay and overflow to auto (Show the scrollbar only when required and not always). Which means once the overlay reaches it's max-height value set, the scroll bar starts to appear.
overlay: {
height: auto,
max-height: 300px or [some other value],
overflow: auto,
width: "90%",
backgroundColor: "#fff",
borderColor: "#22aabe",
borderWidth: 2,
borderRadius: 10
},
Now i have used state hook to hide the Form when the page loads. And upon the click or toggle of the radio I'm able to show the Form, But if i toggle the radio again, the form is not hiding.
This is what i have implemented:
const WelcomeTab = () => {
const [toggle, settoggle] = useState(false);
return (
<React.Fragment>
<Tab.Pane
style={{
borderRadius: '7px',
padding: '30px',
}}
attached={false}
>
<Grid>
<Grid.Row>
<Grid.Column floated="left" width={8}>
<Header
style={{
fontSize: '18px',
fontFamily: 'Nunito-Regular',
color: '#4F4F4F',
}}
>
Welcome Screen
</Header>
</Grid.Column>
<Grid.Column floated="right" width={4}>
<Header
as="h4"
style={{
display: 'flex',
justifyContent: 'space-around',
marginLeft: '30px',
}}
>
Customize
<Radio toggle onChange={() => settoggle({ toggle: !toggle })} />
</Header>
</Grid.Column>
</Grid.Row>
</Grid>
{toggle ? (
<Form style={{ paddingTop: '20px' }}>
<Form.Field>
<label style={lableStyle}>Title</label>
<input style={{ marginBottom: '20px' }} />
<label style={lableStyle}>Message</label>
<TextArea />
</Form.Field>
</Form>
) : null}
</Tab.Pane>
</React.Fragment>
);
};
const lableStyle = {
fontFamily: 'Nunito-Regular',
fontWeight: 400,
color: '#4F4F4F',
fontSize: '15px',
display: 'inline-block',
marginBottom: '10px',
};
export default WelcomeTab;
try to add useEffect hook along with change like below,
you no longer need to {} this is old syntax of setState, using hooks we directly make the changes, hope this helps
useEffect(()=>{},[toggle])
replace this wrong syntax code, i can see its not json its boolean value
<Radio toggle onChange={()=>settoggle({toggle: !toggle})}/>
as this is old syntax not work with hooks, try to implment this instead,
<Radio toggle onChange={()=>settoggle(!toggle)}/>
I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.
However on the selection of an option the two texts get blurred like this:
Here is the code for the same:
<Grid item xs={6}>
<FormControl id="Process" style={{ width: "78%" }} size="small">
<InputLabel
htmlFor="Process"
id="Process"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Process
</InputLabel>
<Select
labelId="Process"
name="Process"
id="Process"
onChange={() => this.setState({ addModalShow: true })}
defaultValue={values.Process}
variant="outlined"
inputProps={{
id: "Process"
}}
>
<MenuItem value="1">Implemented</MenuItem>
<MenuItem value="2">Implementation in Progress</MenuItem>
<MenuItem value="3">Not Implemented</MenuItem>
</Select>
</FormControl>
<Button
variant="outlined"
color="primary"
onClick={() => this.setState({ addModalShow: true })}
size="small"
style={styles.button2}
>
+
</Button>
<label
id="process"
style={{ visibility: "hidden", color: "red" }}
>
Process cannot be blank
</label>
</Grid>
</Grid>
Could anyone please tell me why this is happening?
Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.
If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:
Remove style customization, I mean remove this css:
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
put a condition to InputLabel content. Something like:
{values.Process === "" && "Process"}
In this way, Process label will be visible only if you haven't selected nothing on Select component.
Here a codesandbox example.
Can I achieve avatar in the textfield of autocomplete material-ui component as the getOptionLabel prop only accepts a string and render option the expected UI is shown .i.e profile picture and Name, can we get the same thing i.e profile picture and name in the renderInput textField
You can return your custom component in renderInput props, and that custom can be a combination of icon and TextField Like this...
renderInput={(params, data) => (
<div style={{ position: "relative" }}>
{params.inputProps.value && (
<span
style={{
position: "absolute",
transform: "translateY(50%)",
marginLeft: "5px"
}}
>
{/* Write logic to have Icon from params.inputProps.value */}
{countryToFlag("AD")}
</span>
)}
<TextField
{...params}
label="Choose a country"
variant="outlined"
inputProps={{
...params.inputProps,
autoComplete: "new-password",
style: { paddingLeft: "20px" } // disable autocomplete and autofill
}}
/>
</div>
)}
As you can see I have provided the Absolute position span which will render the icon based on the selected value(I am still not able to find a way to access the options object).
Here is the complete and running sandbox project