Skip to content

Conversation

@aleccaputo
Copy link
Contributor

On touch screens, the pointer cursor is causing the entire Rating span to flash a blue highlight on click, disable the "pointer" on phone screens to solve this issue.
To reproduce go to https://material-ui.com/components/rating/ and open dev tools to emulate a phone. Now "tap" on a star to change the rating, note the blue highlight effect.

On touch screens, the pointer cursor is causing the entire Rating span to flash a blue highlight on click, disable the "pointer" on phone screens to solve this issue
@mui-pr-bot
Copy link

mui-pr-bot commented Nov 28, 2019

Details of bundle changes.

Comparing: 7a329c5...ce596a6

bundle Size Change Size Gzip Change Gzip
Rating ▲ +38 B (+0.06% ) 68.9 kB ▲ +24 B (+0.11% ) 22.1 kB
@material-ui/lab ▲ +38 B (+0.02% ) 173 kB ▲ +3 B (+0.01% ) 52.1 kB
@material-ui/core -- 354 kB -- 96.7 kB
@material-ui/core[umd] -- 311 kB -- 89.6 kB
@material-ui/styles -- 51 kB -- 15.3 kB
@material-ui/system -- 14.8 kB -- 4.06 kB
AppBar -- 62.6 kB -- 19.5 kB
Autocomplete -- 127 kB -- 39.6 kB
Avatar -- 61.6 kB -- 19.3 kB
Backdrop -- 66.6 kB -- 20.5 kB
Badge -- 64.2 kB -- 19.9 kB
BottomNavigation -- 61.3 kB -- 19.1 kB
BottomNavigationAction -- 74.3 kB -- 23.4 kB
Box -- 69.6 kB -- 21 kB
Breadcrumbs -- 66.9 kB -- 20.9 kB
Button -- 78.3 kB -- 23.9 kB
ButtonBase -- 72.8 kB -- 22.8 kB
ButtonGroup -- 80.9 kB -- 24.8 kB
Card -- 61.6 kB -- 19.2 kB
CardActionArea -- 73.9 kB -- 23.2 kB
CardActions -- 60.9 kB -- 19 kB
CardContent -- 60.9 kB -- 19 kB
CardHeader -- 63.9 kB -- 20 kB
CardMedia -- 61.2 kB -- 19.2 kB
Checkbox -- 80.6 kB -- 25.3 kB
Chip -- 81.4 kB -- 24.8 kB
CircularProgress -- 63 kB -- 19.8 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
Collapse -- 66.8 kB -- 20.6 kB
colorManipulator -- 3.83 kB -- 1.52 kB
Container -- 62 kB -- 19.3 kB
CssBaseline -- 56.4 kB -- 17.6 kB
Dialog -- 81.4 kB -- 25.4 kB
DialogActions -- 61 kB -- 19 kB
DialogContent -- 61.1 kB -- 19.1 kB
DialogContentText -- 62.9 kB -- 19.7 kB
DialogTitle -- 63.1 kB -- 19.7 kB
Divider -- 61.5 kB -- 19.2 kB
docs.landing -- 55.5 kB -- 14.4 kB
docs.main -- 609 kB -- 194 kB
Drawer -- 83.2 kB -- 25.2 kB
ExpansionPanel -- 70.1 kB -- 21.8 kB
ExpansionPanelActions -- 61 kB -- 19 kB
ExpansionPanelDetails -- 60.8 kB -- 19 kB
ExpansionPanelSummary -- 76.9 kB -- 24.2 kB
Fab -- 75.6 kB -- 23.5 kB
Fade -- 22.4 kB -- 7.71 kB
FilledInput -- 72.3 kB -- 22.4 kB
FormControl -- 63.2 kB -- 19.6 kB
FormControlLabel -- 64.4 kB -- 20.1 kB
FormGroup -- 60.9 kB -- 19 kB
FormHelperText -- 62.1 kB -- 19.4 kB
FormLabel -- 62.3 kB -- 19.2 kB
Grid -- 64 kB -- 20 kB
GridList -- 61.4 kB -- 19.2 kB
GridListTile -- 62.6 kB -- 19.5 kB
GridListTileBar -- 62.1 kB -- 19.3 kB
Grow -- 23 kB -- 7.83 kB
Hidden -- 64.8 kB -- 20.3 kB
Icon -- 61.7 kB -- 19.2 kB
IconButton -- 74.9 kB -- 23.3 kB
Input -- 71.3 kB -- 22.1 kB
InputAdornment -- 63.9 kB -- 20 kB
InputBase -- 69.4 kB -- 21.7 kB
InputLabel -- 64.2 kB -- 20 kB
LinearProgress -- 64.2 kB -- 20 kB
Link -- 65.5 kB -- 20.6 kB
List -- 61.2 kB -- 19 kB
ListItem -- 75.9 kB -- 23.6 kB
ListItemAvatar -- 61 kB -- 19 kB
ListItemIcon -- 61.1 kB -- 19 kB
ListItemSecondaryAction -- 60.9 kB -- 19 kB
ListItemText -- 63.8 kB -- 19.9 kB
ListSubheader -- 61.6 kB -- 19.3 kB
Menu -- 87.1 kB -- 26.8 kB
MenuItem -- 77 kB -- 23.9 kB
MenuList -- 64.8 kB -- 20.2 kB
MobileStepper -- 66.6 kB -- 20.8 kB
Modal -- 14.2 kB -- 4.99 kB
NativeSelect -- 75.6 kB -- 23.7 kB
NoSsr -- 2.19 kB -- 1.03 kB
OutlinedInput -- 72.8 kB -- 22.6 kB
Paper -- 61.1 kB -- 19 kB
Popover -- 81.5 kB -- 25.1 kB
Popper -- 28.6 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 81.5 kB -- 25.6 kB
RadioGroup -- 62.1 kB -- 19.4 kB
RootRef -- 4.43 kB -- 1.67 kB
Select -- 113 kB -- 33.5 kB
Skeleton -- 61.4 kB -- 19.3 kB
Slide -- 24.5 kB -- 8.32 kB
Slider -- 74.5 kB -- 23.3 kB
Snackbar -- 76 kB -- 23.7 kB
SnackbarContent -- 64.5 kB -- 20.2 kB
SpeedDial -- 84.9 kB -- 26.7 kB
SpeedDialAction -- 115 kB -- 36.5 kB
SpeedDialIcon -- 63.4 kB -- 19.9 kB
Step -- 61.5 kB -- 19.2 kB
StepButton -- 81.1 kB -- 25.5 kB
StepConnector -- 61.6 kB -- 19.3 kB
StepContent -- 67.9 kB -- 21.2 kB
StepIcon -- 63.5 kB -- 19.7 kB
StepLabel -- 67.5 kB -- 21.1 kB
Stepper -- 63.6 kB -- 20 kB
styles/createMuiTheme -- 15.6 kB -- 5.47 kB
SvgIcon -- 61.9 kB -- 19.3 kB
SwipeableDrawer -- 90.6 kB -- 28 kB
Switch -- 79.9 kB -- 25 kB
Tab -- 75.2 kB -- 23.7 kB
Table -- 61.4 kB -- 19.2 kB
TableBody -- 61 kB -- 19 kB
TableCell -- 62.9 kB -- 19.7 kB
TableFooter -- 61 kB -- 19 kB
TableHead -- 61 kB -- 19 kB
TablePagination -- 140 kB -- 40.7 kB
TableRow -- 61.4 kB -- 19.1 kB
TableSortLabel -- 76.2 kB -- 23.9 kB
Tabs -- 84.3 kB -- 26.5 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
TextField -- 122 kB -- 35.5 kB
ToggleButton -- 75 kB -- 23.7 kB
ToggleButtonGroup -- 62.1 kB -- 19.4 kB
Toolbar -- 61.2 kB -- 19.1 kB
Tooltip -- 99.4 kB -- 31.4 kB
TreeItem -- 72.4 kB -- 22.8 kB
TreeView -- 65.2 kB -- 20.4 kB
Typography -- 62.5 kB -- 19.5 kB
useAutocomplete -- 12.4 kB -- 4.56 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.5 kB -- 7.71 kB

Generated by 🚫 dangerJS against ce596a6

@oliviertassinari oliviertassinari changed the title Fix rating highlight on click on mobile [Rating] Improve mobile support Nov 28, 2019
@oliviertassinari oliviertassinari added the scope: rating Changes related to the rating. label Nov 28, 2019
fontSize: theme.typography.pxToRem(24),
color: '#ffb400',
cursor: 'pointer',
// Remove blue highlight
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can just remove this comment as it obviously causes more confusion. The statement itself already says that the highlight is removed. What color the highlight has is platform/user stylesheet dependent.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure 👍

@aleccaputo
Copy link
Contributor Author

aleccaputo commented Nov 28, 2019

Thanks @oliviertassinari @eps1lon

@oliviertassinari oliviertassinari merged commit 2c41ac9 into mui:master Nov 28, 2019
@oliviertassinari
Copy link
Member

Thank you, I had this issue on my to do list for quite some time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: rating Changes related to the rating.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants