Skip to content

Commit

Permalink
Fix #3092: Dropdown support required attribute (#3146)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware committed Aug 13, 2022
1 parent bddcd50 commit 0074456
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 18 deletions.
24 changes: 12 additions & 12 deletions components/doc/dropdown/index.js
View file
Expand Up @@ -187,17 +187,17 @@ export class DropdownDemo extends Component {
<div className="dropdown-demo">
<div className="card">
<h5>Basic</h5>
<Dropdown value={this.state.selectedCity1} options={this.cities} onChange={this.onCityChange} optionLabel="name" placeholder="Select a City" />
<Dropdown value={this.state.selectedCity1} options={this.cities} onChange={this.onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5>
<Dropdown value={this.state.selectedCity2} options={this.cities} onChange={this.onCityChange2} optionLabel="name" editable />
<Dropdown value={this.state.selectedCity2} options={this.cities} onChange={this.onCityChange2} optionLabel="name" optionValue="code" editable />
<h5>Grouped</h5>
<Dropdown value={this.state.selectedGroupedCity} options={this.groupedCities} onChange={this.onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
optionGroupTemplate={this.groupedItemTemplate} />
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown value={this.state.selectedCountry} options={this.countries} onChange={this.onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
<Dropdown value={this.state.selectedCountry} options={this.countries} onChange={this.onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
valueTemplate={this.selectedCountryTemplate} itemTemplate={this.countryOptionTemplate} />
<h5>Virtual Scroll (100000 Items)</h5>
Expand Down Expand Up @@ -381,17 +381,17 @@ const DropdownDemo = () => {
<div className="dropdown-demo">
<div className="card">
<h5>Basic</h5>
<Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" placeholder="Select a City" />
<Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5>
<Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" editable />
<Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" optionValue="code" editable />
<h5>Grouped</h5>
<Dropdown value={selectedGroupedCity} options={groupedCities} onChange={onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
optionGroupTemplate={groupedItemTemplate} />
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
<h5>Virtual Scroll (100000 Items)</h5>
Expand Down Expand Up @@ -574,17 +574,17 @@ const DropdownDemo = () => {
<div className="dropdown-demo">
<div className="card">
<h5>Basic</h5>
<Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" placeholder="Select a City" />
<Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5>
<Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" editable />
<Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" optionValue="code" editable />
<h5>Grouped</h5>
<Dropdown value={selectedGroupedCity} options={groupedCities} onChange={onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
optionGroupTemplate={groupedItemTemplate} />
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
<h5>Virtual Scroll (100000 Items)</h5>
Expand Down Expand Up @@ -771,17 +771,17 @@ const DropdownDemo = () => {
<div className="dropdown-demo">
<div className="card">
<h5>Basic</h5>
<Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" placeholder="Select a City" />
<Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5>
<Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" editable />
<Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" optionValue="code" editable />
<h5>Grouped</h5>
<Dropdown value={selectedGroupedCity} options={groupedCities} onChange={onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
optionGroupTemplate={groupedItemTemplate} />
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />
<h5>Virtual Scroll (100000 Items)</h5>
Expand Down
7 changes: 4 additions & 3 deletions components/lib/dropdown/Dropdown.js
View file
Expand Up @@ -600,11 +600,12 @@ export const Dropdown = React.memo(React.forwardRef((props, ref) => {

const createHiddenSelect = () => {
const placeHolderOption = <option value="">{props.placeholder}</option>;
const option = selectedOption ? <option value={selectedOption.value} selected>{getOptionLabel(selectedOption)}</option> : null;
let selectedValue = selectedOption ? getOptionValue(selectedOption) : "";
const option = selectedOption ? <option value={selectedValue}>{getOptionLabel(selectedOption)}</option> : null;

return (
<div className="p-hidden-accessible p-dropdown-hidden-select">
<select ref={inputRef} required={props.required} name={props.name} tabIndex={-1} aria-hidden="true">
<select ref={inputRef} required={props.required} value={selectedValue} name={props.name} tabIndex={-1} aria-hidden="true" onChange={(e) => selectedValue = e.target.value}>
{placeHolderOption}
{option}
</select>
Expand Down Expand Up @@ -762,4 +763,4 @@ Dropdown.defaultProps = {
onShow: null,
onHide: null,
onFilter: null
}
}
6 changes: 3 additions & 3 deletions pages/dropdown/index.js
View file
Expand Up @@ -175,17 +175,17 @@ const DropdownDemo = () => {
<div className="content-section implementation dropdown-demo">
<div className="card">
<h5>Basic</h5>
<Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" placeholder="Select a City" />
<Dropdown value={selectedCity1} options={cities} onChange={onCityChange} optionLabel="name" optionValue="code" placeholder="Select a City" />

<h5>Editable</h5>
<Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" editable />
<Dropdown value={selectedCity2} options={cities} onChange={onCityChange2} optionLabel="name" optionValue="code" editable />

<h5>Grouped</h5>
<Dropdown value={selectedGroupedCity} options={groupedCities} onChange={onGroupedCityChange} optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"
optionGroupTemplate={groupedItemTemplate} />

<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" filter showClear filterBy="name" placeholder="Select a Country"
<Dropdown value={selectedCountry} options={countries} onChange={onCountryChange} optionLabel="name" optionValue="code" filter showClear filterBy="name" placeholder="Select a Country"
valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} />

<h5>Virtual Scroll (100000 Items)</h5>
Expand Down

0 comments on commit 0074456

Please sign in to comment.