From 51a7c2623a43bead99744b5286e02bebedfc6363 Mon Sep 17 00:00:00 2001 From: Mike Frazier Date: Fri, 22 Oct 2021 12:04:30 -0600 Subject: [PATCH 1/4] Add prop to mark field as required * Add prop reference to README and interface * Add storybook entryAdd prop to mark field as required --- README.md | 1 + src/multiselect/interface.ts | 3 ++- src/multiselect/multiselect.component.tsx | 8 +++++--- stories/basic.stories.tsx | 10 +++++++++- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 98c84a3..115deb6 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,7 @@ onRemove(selectedList, removedItem) { | `showArrow` | `bool` | `false` | For multiselect dropdown by default arrow wont show at the end, If required based on flag we can display | `keepSearchTerm` | `bool` | `false` | Whether or not to keep the search value after selecting or removing an item | `customCloseIcon` | `ReactNode or string` | `undefined` | Custom close icon and can be string or react component(Check demo for reference) +| `required` | `boolean` | `false` | Marks the input field as required to prevent form submission with missing values ---- diff --git a/src/multiselect/interface.ts b/src/multiselect/interface.ts index 632a43c..d899da3 100644 --- a/src/multiselect/interface.ts +++ b/src/multiselect/interface.ts @@ -24,5 +24,6 @@ export interface IMultiselectProps { hidePlaceholder?: boolean, showArrow?: boolean, keepSearchTerm?: boolean, - customCloseIcon?: React.ReactNode | string + customCloseIcon?: React.ReactNode | string, + required?: boolean } diff --git a/src/multiselect/multiselect.component.tsx b/src/multiselect/multiselect.component.tsx index 3755a8f..c140675 100644 --- a/src/multiselect/multiselect.component.tsx +++ b/src/multiselect/multiselect.component.tsx @@ -16,7 +16,7 @@ const closeIconTypes = { }; export class Multiselect extends React.Component { - static defaultProps: { options: never[]; disablePreSelectedValues: boolean; selectedValues: never[]; isObject: boolean; displayValue: string; showCheckbox: boolean; selectionLimit: number; placeholder: string; groupBy: string; style: {}; emptyRecordMsg: string; onSelect: () => void; onRemove: () => void; closeIcon: string; singleSelect: boolean; caseSensitiveSearch: boolean; id: string; closeOnSelect: boolean; avoidHighlightFirstOption: boolean; hidePlaceholder: boolean; showArrow: boolean; keepSearchTerm: boolean; }; + static defaultProps: { options: never[]; disablePreSelectedValues: boolean; selectedValues: never[]; isObject: boolean; displayValue: string; showCheckbox: boolean; selectionLimit: number; placeholder: string; groupBy: string; style: {}; emptyRecordMsg: string; onSelect: () => void; onRemove: () => void; closeIcon: string; singleSelect: boolean; caseSensitiveSearch: boolean; id: string; closeOnSelect: boolean; avoidHighlightFirstOption: boolean; hidePlaceholder: boolean; showArrow: boolean; keepSearchTerm: boolean; required: boolean; }; constructor(props) { super(props); this.state = { @@ -505,7 +505,7 @@ export class Multiselect extends React.Component { renderMultiselectContainer() { const { inputValue, toggleOptionsList, selectedValues } = this.state; - const { placeholder, style, singleSelect, id, hidePlaceholder, disable, showArrow} = this.props; + const { placeholder, style, singleSelect, id, hidePlaceholder, disable, showArrow, required} = this.props; return (
{ style={style['inputField']} autoComplete="off" disabled={singleSelect || disable} + required={required} /> {(singleSelect || showArrow) && 🍑, selectedValues -}; \ No newline at end of file +}; + +export const RequiredField = Template.bind({}); +RequiredField.args = { + options, + displayValue: 'key', + selectedValues, + required: true, +}; From 8e37324edd210041fb5b6fd60504d02be17b5512 Mon Sep 17 00:00:00 2001 From: Mike Frazier Date: Fri, 22 Oct 2021 12:13:01 -0600 Subject: [PATCH 2/4] Add SubmitTemplate for testing --- stories/basic.stories.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/stories/basic.stories.tsx b/stories/basic.stories.tsx index 64101b1..d302720 100644 --- a/stories/basic.stories.tsx +++ b/stories/basic.stories.tsx @@ -27,6 +27,16 @@ export default { } as Meta; const Template: Story = (args) => ; +const SubmitTemplate: Story = args => { + return ( + <> +
+ + {}} /> + + + ) +} export const FlatArray = Template.bind({}); FlatArray.args = { @@ -108,7 +118,7 @@ CustomCloseIcon.args = { selectedValues }; -export const RequiredField = Template.bind({}); +export const RequiredField = SubmitTemplate.bind({}); RequiredField.args = { options, displayValue: 'key', From b8b868d2eea6d5c61d6f6caaae04f1405ab97b82 Mon Sep 17 00:00:00 2001 From: Mike Frazier Date: Fri, 22 Oct 2021 14:27:25 -0600 Subject: [PATCH 3/4] Remove required attribute on input field * Add validation message on field --- src/multiselect/multiselect.component.tsx | 4 ++-- src/multiselect/styles.css | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/multiselect/multiselect.component.tsx b/src/multiselect/multiselect.component.tsx index c140675..2e39571 100644 --- a/src/multiselect/multiselect.component.tsx +++ b/src/multiselect/multiselect.component.tsx @@ -506,8 +506,9 @@ export class Multiselect extends React.Component { renderMultiselectContainer() { const { inputValue, toggleOptionsList, selectedValues } = this.state; const { placeholder, style, singleSelect, id, hidePlaceholder, disable, showArrow, required} = this.props; + const hasRequiredError = required && selectedValues.length === 0; return ( -
+
{}} @@ -527,7 +528,6 @@ export class Multiselect extends React.Component { style={style['inputField']} autoComplete="off" disabled={singleSelect || disable} - required={required} /> {(singleSelect || showArrow) && Date: Mon, 25 Oct 2021 09:35:51 -0600 Subject: [PATCH 4/4] Add note about form validation on the field --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 115deb6..5e50f95 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ onRemove(selectedList, removedItem) { | `showArrow` | `bool` | `false` | For multiselect dropdown by default arrow wont show at the end, If required based on flag we can display | `keepSearchTerm` | `bool` | `false` | Whether or not to keep the search value after selecting or removing an item | `customCloseIcon` | `ReactNode or string` | `undefined` | Custom close icon and can be string or react component(Check demo for reference) -| `required` | `boolean` | `false` | Marks the input field as required to prevent form submission with missing values +| `required` | `boolean` | `false` | Marks the input field as required to prevent form submission with missing values. **Form validation is required to ensure the field is populated before submitting.** ----