question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select's popover can be shorter than input because of adornments

See original GitHub issue

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

image

Expected behavior 🤔

Left edge of the popover reaches left edge of the input

From 0.5 seconds of looking at html, this might be a solution: image

Steps to reproduce 🕹

<Select
	fullWidth
	startAdornment={
		<InputAdornment position="start">
			<LanguageIcon />
		</InputAdornment>
	}
>
	{["foo", "bar"].map((opt) => (
		<MenuItem value={opt} key={opt}>
			{opt}
		</MenuItem>
	))}
</Select>

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`
  System:
    OS: Windows 10 10.0.22000
  Binaries:
    Node: 17.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.0 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Version 104.0.5094.0 (Official Build) canary (64-bit)
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.82
    @mui/icons-material: ^5.8.0 => 5.8.0
    @mui/lab: ^5.0.0-alpha.83 => 5.0.0-alpha.83
    @mui/material: ^5.8.1 => 5.8.1
    @mui/private-theming:  5.8.0
    @mui/styled-engine:  5.8.0
    @mui/system:  5.8.1
    @mui/types:  7.1.3
    @mui/utils:  5.8.0
    @mui/x-date-pickers:  5.0.0-alpha.1
    @types/react: ^18.0.9 => 18.0.9
    react: ^18.1.0 => 18.1.0
    react-dom: ^18.1.0 => 18.1.0
    typescript: ^4.7.2 => 4.7.2

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
HARAJLI98commented, Jul 5, 2022

Has there been any progress on this? I’m running into the same issue 😦

0reactions
Zetta56commented, Sep 5, 2022

Is anyone still working on this issue? If not, I can try fixing it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material UI - Select Menu with End Adornment - Stack Overflow
The main problem is that whatever you put there, it will overlap it. Here's an example of how I did it. First, define...
Read more >
Inputting ornaments/trills with the popover - Steinberg.help
You can input ornaments, trills, and jazz ornaments using the ornaments popover, both during note input and by adding them to existing notes....
Read more >
React Text Field component - Material UI - MUI
The input label "shrink" state isn't always correct. The input label is supposed to shrink as soon as the input is displaying something....
Read more >
Dorico 1.2 review, part 2: Fingering - Scoring Notes
To summon it, select a note or chord in Write mode and then ... as can be seen below (compare the popover input...
Read more >
DORICO – The Next-Generation Scoring Software - Facebook
select the hairpin, then Alt/Opt-click where you want it to go; you can ... I think niente hairpins only work in the popover...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found