Moving the Anchor of Material UI's MultiSelect Popup on Selection

After updating from Material UI 4.2.0 to 4.9.10, I observed a change in behavior that seems to have originated in version 4.8.3.

When using a Select element with the multiple attribute, I noticed that the popup menu shifts after selecting the first item. In some cases, it moved multiple times as more items were selected, but in the provided example, it only moves when choosing the initial item. Here's a codesandbox showcasing this issue: https://codesandbox.io/s/recursing-morse-2omxy?fontsize=14&hidenavigation=1&theme=dark

I also included a code sample using Material UI 4.8.2 for comparison purposes. In this case, the menu remains anchored where it initially appeared even after selecting items: https://codesandbox.io/s/recursing-frost-pxlds?fontsize=14&hidenavigation=1&theme=dark

Personally, I prefer the behavior of the second example where the menu stays in place while I make selections. Despite exploring the API and trying different anchors, I haven't found a solution to prevent the menu from moving in versions 4.8.3 and above. Does anyone know how to achieve this stability with newer versions of Material UI?

javascriptmaterial-ui

Answer №1

It has been discovered that there is a bug within Material UI which is set to be resolved in the upcoming version 5. In the meantime, you can implement the following workaround:

    <Select
        MenuProps={{
            getContentAnchorEl: () => null,
        }}

Answer №2

Unfortunately, the solution provided by @JoshSchmitton did not solve my issue when working with Typescript due to the type definition for getContentAnchorEl being 

((element: Element) => Element) | null | undefined
. However, after making a small adjustment, I was able to achieve the desired outcome:

<Select
        MenuProps={{
            getContentAnchorEl: null,
        }} />

A special thanks to Josh Schmitton for the initial attempt.

Answer №3

To begin, you have the ability to generate an object:

const MenuOptions = {
    getContentAnchorEl: null,
    PaperProps: {
        style: {
            maxHeight: 200,
            width: 300,
        },
    },
};

Subsequently,

<Select MenuOptions={MenuOptions}>

Answer №4

Give this code a try, the outcome will closely resemble the current version 5 material UI.

Setting getContentAnchorEl to null helps in adjusting the position of the drop-down menu.

The additional props are used to move the drop-down lower without overlapping with the input field.

<Select
    MenuProps={{
        getContentAnchorEl: () => null,
        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
        transformOrigin: { vertical: 'top', horizontal: 'center' },
    }} />

Answer №5

To prevent the dropdown from moving regardless of the number of selected items, simply include the following code inside the Select component:

<Select MenuProps={{ autoFocus: true }} />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transfer data from a Django template populated with items from a forloop using Ajax to a Django view

Struggling to implement a click and populate div with ajax in my django e-commerce app. The function involves clicking on a category in the men's page which then populates another div. gender.html {%for cate in cat%} <a href="javascript:getcat()" ...

javascriptjqueryhtmlajaxdjango

Is there a way to use flexbox in a grid to center only a specific tab from MUI?

I am working with an array of tabs and encountering a layout issue. The tabs need to share the available space when there's more than one tab, but when there's only one tab, it should be positioned in the middle of the column. How can I address t ...

javascriptcssreactjsmaterial-ui

Showing information in Vue.js using v-for loops

I'm currently working on a basic shopping cart system using Laravel and Vue.js. I've been able to add items to the basket and retrieve them successfully up to a certain point, but I'm facing challenges when it comes to displaying these items ...

javascriptvue.jsvue-resource

Ingesting a PDF stream into a JSP document

How can I display a PDF report inside a JSP? I have the PDFstream available using the following code private void generatePDFReport(OutputStream stream, JasperPrint jasperPrint) throws JRException { JRPdfExporter jrpdfexporter = new JRPdfExporter(); jrp ...

javascriptajaxjsppdfjasper-reports

focusing on a specialized format using the serialize() method

Following up on my previous question which was answered so promptly by Meder, there is now an additional query that has arisen while creating a reusable jQuery form submission without redirecting the user. Issue The jQuery serialize() function is applyin ...

javascriptjquery-pluginsjqueryjquery-forms-plugin

Pass the values of both buttons to a different page using PHP

I am currently developing a system for a hospital. The data is sourced from an array and I need to pass the values from two buttons to another page. For example, on the initial page: 1 xyz First 2017-04-08 11:35:00 body checkup Generate Presc ...

javascriptphpjqueryhtmlarrays

Setting up the karma ng-html2js preprocessor to locate my templates within a specific folder

Currently, I am facing an issue where I need to set the templateUrl: "partials/my-directive.html" However, I find that I have to use templateUrl: "app/partials/my-directive.html for it to be loaded by Karma. This is how my folder structure looks like (fo ...

javascriptangularjskarma-runnerng-html2js

Get the values of var1 and var2 from the URL in PHP, for example: `example.php?var1

Currently, a portion of my website operates by using GET requests to navigate to profiles or pages. However, I am concerned about the scenario where a user visits someone's profile page (requiring one GET) and then clicks on a sub-tab within that prof ...

phpjavascriptjqueryhtmlget

Retrieve data from json files

After retrieving this object from my controller, I have a name, a list of beans, and a list of operations: { "name": "Charge", "beans": [ ], "operations": [ { "name": "getSize", "returnType": "java.lang.Integer", "descriptio ...

javascripthtmlangularjs

Examining Angular Modules using Jasmine Unit Tests

Currently, I am integrating an AngularJS service into my application. Upon testing, I discovered that the service is not as reliable as I had hoped. To address this issue, I decided to implement some unit tests for it. While the service functions properly ...

javascriptangularjsgruntjsjasmine

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

I am attempting to style <TextField/> (http://www.material-ui.com/#/components/text-field) to resemble an <input/>. Here is what I have tried: <TextField hintText='Enter username' > <input className="form-control ...

javascripthtmlcssreactjsmaterial-ui

Should you make multiple API calls or just one?

Currently in the process of developing an application that combines NodeJS and VueJs. I have created an API endpoint that provides all the necessary data. For instance, it may include The top Football Team The bottom Football Team The team with the most ...

javascriptnode.jsvue.jsapi-design

Having identical functions with varying IDs and the same variable in Ajax is causing issues

Here, I have two HTML rows with different IDs. When the function ItemSearch() is called, I want to display the search results for both IDs. I am new to JavaScript and AJAX. ***1st Html*** <div class="justlauchSearch"> <div class="input-gro ...

javascriptjqueryajax

Is it possible to conceal JavaScript comments on a page before it is displayed?

Curiosity has led me to ponder a question that may seem trivial. Consider this scenario: in my HTML or ASPX page, I include a comment for some JavaScript code. When the page loads, will the comments be rendered along with the rest of the page's conten ...

javascriptjqueryasp.nethtmlbrowser

"Utilizing Bootstrap's dropdown.js script independently: A Step-by-Step Guide

Has anyone been able to successfully use the Bootstrap dropdown.js component without integrating the entire Bootstrap library? I've attempted it, but haven't had any luck so far. Upon reading the documentation, it appears that the dropdown.js co ...

javascriptbootstrap-4

What is the best method for creating a top margin that is dependent on the height of the browser?

Is there a way to make the CSS margin: top; on my HTML main_content element relative to the browser window? I want the main_content to always stay at the bottom of the browser window. How can I achieve this? I attempted the following code, but it didn&apo ...

javascripthtmlcss

What is causing the colorful background to not fully cover my page when I make the window smaller?

I'm currently designing a webpage that features a dynamic gradient background. Within this webpage are two columns - one displaying an image of a phone, and the other containing text. In full screen mode, everything looks perfect. The gradient stretch ...

javascripthtmlcss

Unique loading animations are assigned to each individual page within the Next.js framework

Is there a way to have unique loading animations for each of my website pages during the loading process? How can I achieve this? I've attempted to put the loading component on the page component directly, but it doesn't seem to work: //Page com ...

javascriptreactjstypescriptnext.jsloading

Animation of disappearing blocks covering the entire screen

I am currently working on creating a slider with fading blocks animation similar to the one shown here. The challenge I am facing is making it fullscreen, where the height and width will be variable. This makes using the background-position trick ineffecti ...

javascripthtmlcssanimation

"Use jQuery to target the first child element within a parent element that has a specific class

Is there a way to choose only the first child of a specific parent class with a certain class for the purpose of clone()? <div class="sector_order"> <div class="line_item_wrapper"> SELECT THIS DIV </div> <div class=" ...

javascriptjqueryjquery-selectors