placeholder property of select tag in antd not working

Question

This is the code snippet I'm using. The placeholder is not showing in UI. I am using antd controls.

<Select placeholder="Select A User Role" value={'RoleID'}>
  <Option value='2'>Company Admin</Option>
  <Option value='3'>Company User</Option>
</Select>

style.css

.ant-select-dropdown {
    max-width: 400px;
    width: 100% !important;
}
.ant-select-selection-selected-value {
    width: 100%;
  }
.ant-table-tbody > tr > td, .ant-table-thead > tr > th
{
    padding:4px;    
}

tr:nth-child(even){
    background: white;
} 
tr.active { 
background-color: #b3ffb3;
}
thead[class*="ant-table-thead"] th{
    background-color:#000 !important;
    color: white;
    font-weight: bold;
    border-color: #000;
  }
.table_btn
{
    margin:0 !important;
}
.ant-btn
{
    margin:0;
}
.ant-create-invoice-form {
    padding: 24px;   
    margin:24px;
    background: #f1e6ff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
  }  
  .ant-create-invoice-header-form {   
    height: 25px; 

  } 
.totallblStyle{
    font-size: 14px;
    font-weight: bold;
}
.lblStyle{
    font-size: 12px;
    font-weight: bold;
    padding-top: 10px;
}
.headerlblStyle{
    font-size: 14px;
    font-weight: bold;
    width: 160px;    
    padding-bottom: 10px;   
}
.headerlblDescStyle{
    font-size: 14px;
    font-weight: bold;
    width: 260px;    
}
.userHeader{
    color: #000;
    cursor: pointer;
}
.headerStyle{
    color: #000;   
}

.gx-main-content-wrapper {
    padding: 5px 20px ; 
}
.ant-table-tbody > tr:hover > td {
    color: #fff;
}
.cancel-btn {
  color: #f0ad4e ;
  border-color: #d9d9d9 ;
}
.cancel-btn:hover {
   background-color: #f0ad4e;
    color: #fff;
    border-color: #eea236;
}
.save-btn {
   color: #3d8918 ;
   border-color: #d9d9d9 ;
}
.save-btn:hover {
    background-color:#3d8918 ;
    color: #fff ;
    border-color: #d9d9d9
}
.loginAs {
   text-align: center;
    margin-bottom: 10px;
}
.sign-up 
.gx-app-login-container {
  max-width: 1000px !important;
}
.gx-user-popover li:hover,
 .gx-user-popover li:focus {
    background-color: #d5d5d5;
}
.avtImgStyle{
    width: 35px;
    height: 35px;
}
.ant-input-disabled {
    background-color: #fff;
    opacity: 1;
    cursor: not-allowed;
    color: inherit;
}
.selected {
    background: #545454 !important;
    color:#fff !important;
}

.ant-select-dropdown-menu-item:hover {
     color:#fff ;
}
.ant-tabs-bar .ant-tabs-tab {
    text-align: right;
    font-weight: bold;
}

This is the style page I am importing in my page.

The place holder for all <Input> tags are working.

But not working for <Select>.

Is any of this CSS is preventing the placeholder of ? How can I make the placeholder of select visible?

Answer 1

You need to set the width to see it

<Select placeholder="Select A User Role" style={{ width: 200 }}>
  <Option value="2">Company Admin</Option>
  <Option value="3">Company User</Option>
</Select>

Working example: https://codesandbox.io/s/4w8yxqm7w4

Answer 2

The default class selector for Select component is ant-select (not ant-select-dropdown as in the code you provided). Giving the component a width using the correct class name should work.

Also as mentioned in @baitun's comment, you need to remove the value property in order to show the placeholder.