@availity/feedback 6.0.4 → 6.0.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.5 (2021-09-23)
+
+
+### Bug Fixes
+
+* **feedback:** fixed focus issue for feedback in dropdowns ([378dec1](https://github.com/Availity/availity-react/commit/378dec16ee7a83cb6f078384a6bee642b32b6a21))
+
+
+
+
+
 ## [6.0.4](https://github.com/Availity/availity-react/compare/@availity/feedback@6.0.3...@availity/feedback@6.0.4) (2021-09-17)
 
 **Note:** Version bump only for package @availity/feedback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/feedback",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "author": "Evan Sharp <evan.sharp@availity.com>",
   "description": "Availity feedback with smiley faces react component.",
   "main": "index.js",
@@ -50,5 +50,5 @@
     "reactstrap": "^8.0.0 || ^7.0.0 || ^6.0.0",
     "yup": "^0.27.0"
   },
-  "gitHead": "184cd730528472925ef9add2999a2943761a1e5d"
+  "gitHead": "f478e30875ffcbccc0e7495e17cfe91f7d81dff9"
 }

package/src/FeedbackForm.js

@@ -44,6 +44,7 @@ const FeedbackForm = ({
   modalHeaderProps,
   showSupport,
   setSupportIsActive,
+  autoFocusFeedbackButton,
   ...formProps
 }) => {
   const [active, setActive] = useState(null);
@@ -160,6 +161,7 @@ const FeedbackForm = ({
               options={faceOptions}
               name="smileField"
               onChange={(option) => setActive(option)}
+              autoFocusFeedbackButton={autoFocusFeedbackButton}
             />
           </FormGroup>
           {active ? (
@@ -261,6 +263,7 @@ FeedbackForm.propTypes = {
   }),
   showSupport: PropTypes.bool,
   setSupportIsActive: PropTypes.func,
+  autoFocusFeedbackButton: PropTypes.bool,
 };
 
 FeedbackForm.defaultProps = {

package/src/SmileField.js

@@ -5,13 +5,13 @@ import FeedbackButton from './FeedbackButton';
 
 const btnStyles = { flex: 1, margin: '0 2% 0 2%' };
 
-const SmileField = ({ name, options, onChange }) => {
+const SmileField = ({ name, options, onChange, autoFocusFeedbackButton }) => {
   const [{ value }] = useField(name);
   const { setFieldValue } = useFormikContext();
 
   return options.map((option, i) => (
     <FeedbackButton
-      autoFocus={i === 0}
+      autoFocus={i === 0 && autoFocusFeedbackButton}
       style={btnStyles}
       key={option.icon}
       icon={option.icon}
@@ -40,6 +40,7 @@ SmileField.propTypes = {
     })
   ),
   onChange: PropTypes.func,
+  autoFocusFeedbackButton: PropTypes.bool,
 };
 
 SmileField.defaultProps = {
@@ -60,6 +61,7 @@ SmileField.defaultProps = {
       label: "What don't you like?",
     },
   ],
+  autoFocusFeedbackButton: true,
 };
 
 export default SmileField;

package/tests/FeedbackForm.test.js

@@ -247,4 +247,24 @@ describe('FeedbackForm', () => {
       'feedback-form-header'
     );
   });
+
+  test('should focus first SmileField button by default', async () => {
+    const { getByText } = render(<FeedbackForm name="Payer Space" />);
+
+    const firstFeedbackButton = getByText('Smiley face').closest('button');
+    await waitFor(() => {
+      expect(firstFeedbackButton).toHaveFocus();
+    });
+  });
+
+  test('should not focus first SmileField button if autofocus is set to false', async () => {
+    const { getByText } = render(
+      <FeedbackForm name="Payer Space" autoFocusFeedbackButton={false} />
+    );
+
+    const firstFeedbackButton = getByText('Smiley face').closest('button');
+    await waitFor(() => {
+      expect(firstFeedbackButton).not.toHaveFocus();
+    });
+  });
 });