material UI Multiple Select not viewing several selected items when they selected, my be css issue

Question

I tried to use the Multiple Select. But I get a difference, is that when many items are selected, they are not viewed, I couldn't change the height to be enough to display selected options. please help.

I am sure it is height property because I added height:auto using chrome console and so selected options could be viewed and issue solved at the console. You can guide me through adding the height feature properly. The height may be added to chips style at the styles.

By the way, the problem doesn't appear on a fresh copy of create-react-app that I tested it on it today, but my project which faces the problem is based on a create-project-app generated long time ago, I thought updates or create-react-app releases make difference.

Material UI version: v1.0.0-beta.33

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "auth/google": {
      "target": "https://server243.azurewebsites.net"
    },
    "/api/*": {
      "target": "https://server243.azurewebsites.net"
    },
    "/apis/*": {
      "target": "https://server243.azurewebsites.net"
    }
  },
  "dependencies": {
    "autoprefixer": "7.1.6",
    "aws-amplify": "^0.2.0",
    "aws-amplify-react-native": "^0.2.2",
    "axios": "^0.17.1",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.0",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.0.1",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "3.0.1",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "jquery": "^3.2.1",
    "material-ui": "^1.0.0-beta.24",
    "material-ui-icons": "^1.0.0-beta.17",
    "materialize-css": "^0.100.2",
    "moment": "^2.20.1",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
    "prop-types": "^15.6.0",
    "raf": "3.4.0",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.5",
    "react-dev-utils": "^4.2.1",
    "react-dom": "^16.0.0",
    "react-hot-loader": "^3.1.3",
    "react-loader": "^2.4.2",
    "react-loading-skeleton": "^0.3.1",
    "react-moment": "^0.6.8",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-select": "^1.0.0-rc.10",
    "react-select-me": "^0.9.0",
    "react-virtualized-select": "^3.1.0",
    "redux": "^3.7.2",
    "redux-auth": "0.0.5-beta5",
    "redux-auth-wrapper": "^2.0.2",
    "redux-thunk": "^2.2.0",
    "style-loader": "0.19.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "universal-cookie": "^2.1.2",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.3",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "cypress:open": "cypress open"
  },
  "devDependencies": {
    "cypress": "^1.4.1"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

Temporary solution: I updated the height and padding at node_modules\material-ui\Select\Select.js but I wish I get right way to solve it.

    selectMenu: {
  width: 'auto', // Fix Safari textOverflow
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  lineHeight: 'calc(1em + ' + (theme.spacing.unit * 2 - 2) + 'px)',

//  I, abdulrhman, added the following:
 height:'auto',
 paddingTop: 20,

},

Answer 1

I believe the SelectField will have the expected behavior in newer versions of the beta. You should try updating to the latest version (material-ui^1.0.0-beta.33 at the time of this writing).

You can update to this version with the npm command:

npm install --save material-ui@1.0.0-beta.33