fix(reactstrap-validation-select): fix a11y issues

packages/reactstrap-validation-select/AvResourceSelect.js

@@ -27,13 +27,21 @@ class AvResourceSelect extends Component {
     itemsPerPage: 50,
   };
 
-  loadOptions = debounce((inputValue, page, callback) => {
+  loadOptions = debounce((...args) => {
+    const [inputValue] = args;
+    let [, page, callback] = args;
     const params = {
       q: inputValue,
       limit: this.props.itemsPerPage,
-      offset: (page - 1) * this.props.itemsPerPage,
       ...this.props.parameters,
     };
+    if (args.length === 3) {
+      params.offset = (page - 1) * this.props.itemsPerPage;
+    } else {
+      callback = page;
+      page = undefined;
+    }
+    if (this.props.onPageChange) this.props.onPageChange(inputValue, page);
     this.props.resource
       .postGet(
         qs.stringify(params, {

packages/reactstrap-validation-select/AvSelect.js

@@ -4,11 +4,32 @@ import classNames from 'classnames';
 import { AvBaseInput } from 'availity-reactstrap-validation';
 import Select from '@thesharpieone/react-select-async-pagination';
 import Async from '@thesharpieone/react-select-async-pagination/lib/Async';
+import {
+  DownChevron,
+  CrossIcon,
+  DropdownIndicator,
+  ClearIndicator,
+} from '@thesharpieone/react-select-async-pagination/lib/components/indicators';
 import get from 'lodash/get';
 import find from 'lodash/find';
 import filter from 'lodash/filter';
 import isEqual from 'lodash/isEqual';
 
+const components = {
+  DropdownIndicator: props => (
+    <DropdownIndicator {...props}>
+      <DownChevron />
+      <span className="sr-only">Toggle Select Options</span>
+    </DropdownIndicator>
+  ),
+  ClearIndicator: props => (
+    <ClearIndicator {...props}>
+      <CrossIcon />
+      <span className="sr-only">Clear all selections</span>
+    </ClearIndicator>
+  ),
+};
+
 class AvSelect extends AvBaseInput {
   static contextTypes = {
     FormCtrl: PropTypes.object,
@@ -142,6 +163,7 @@ class AvSelect extends AvBaseInput {
     if (this.context.FormCtrl) {
       classes = classNames(
         className,
+        'av-select',
         touched ? 'is-touched' : 'is-untouched',
         this.context.FormCtrl.isDirty(this.props.name)
           ? 'is-dirty'
@@ -161,6 +183,7 @@ class AvSelect extends AvBaseInput {
         getOptionLabel={this.getOptionLabel}
         getOptionValue={this.getOptionValue}
         closeMenuOnSelect={!attributes.isMulti}
+        components={components}
         {...attributes}
         {...this.getValidatorProps()}
         value={this.state.value}

packages/reactstrap-validation-select/styles.scss

@@ -1,14 +1,22 @@
-.is-touched.is-invalid .av__control {
+.av-select.is-touched.is-invalid .av__control {
   border-color: #931b1d;
   background-color: #fbcbc8;
   .is-invalid__dropdown-indicator {
     color: #931b1d;
   }
 }
 
-.is-touched.is-invalid .av__control-is-focused {
+.av-select.is-touched.is-invalid .av__control-is-focused {
   background-color: #fff;
   .is-invalid__dropdown-indicator {
     color: #000;
   }
+}
+
+.av-select .av__control {
+  background-color: white;
+}
+
+.av-select .av__placeholder {
+  color: #666;
 }