@pingux/astro 1.10.0 → 1.10.1-alpha.0

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -121,6 +121,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
       scrollBoxProps = props.scrollBoxProps,
+      controlProps = props.controlProps,
       defaultFilter = props.defaultFilter;
   var comboBoxOptions = {
     children: children,
@@ -238,6 +239,11 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
 
+  var handleInputOpen = function handleInputOpen(e) {
+    if (!state.isOpen && menuTrigger === 'focus') buttonRef.current.click();
+    if (controlProps !== null && controlProps !== void 0 && controlProps.onClick) controlProps.onClick(e);
+  };
+
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth
@@ -266,7 +272,10 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     labelProps: labelProps,
     inputRef: inputRef,
     triggerProps: buttonProps,
-    triggerRef: buttonRef
+    triggerRef: buttonRef,
+    controlProps: _objectSpread(_objectSpread({}, controlProps), {}, {
+      onClick: handleInputOpen
+    })
   })), (0, _react2.jsx)(_PopoverContainer["default"], {
     isOpen: state.isOpen,
     ref: popoverRef,
@@ -414,6 +423,11 @@ ComboBoxField.propTypes = {
   /** @ignore */
   scrollBoxProps: _propTypes["default"].shape({
     maxHeight: _propTypes["default"].string
+  }),
+
+  /** Props object that is spread directly into the ComboBoxInput element. */
+  controlProps: _propTypes["default"].shape({
+    onClick: _propTypes["default"].func
   })
 };
 ComboBoxField.defaultProps = {

package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js

@@ -300,6 +300,28 @@ test('should open list on focus when menuTrigger is set to use focus', function
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
   expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(items.length);
 });
+test('should open list on focus on click after selection when menuTrigger is set to use focus', function () {
+  getComponent({
+    menuTrigger: 'focus'
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  _userEvent["default"].click(_testWrapper.screen.queryAllByRole('option')[0]);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveFocus();
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
 

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -75,6 +75,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
       scrollBoxProps = props.scrollBoxProps,
+      controlProps = props.controlProps,
       defaultFilter = props.defaultFilter;
   var comboBoxOptions = {
     children: children,
@@ -192,6 +193,11 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   useLayoutEffect(onResize, [onResize]);
 
+  var handleInputOpen = function handleInputOpen(e) {
+    if (!state.isOpen && menuTrigger === 'focus') buttonRef.current.click();
+    if (controlProps !== null && controlProps !== void 0 && controlProps.onClick) controlProps.onClick(e);
+  };
+
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: menuWidth,
     minWidth: menuWidth
@@ -221,7 +227,10 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     labelProps: labelProps,
     inputRef: inputRef,
     triggerProps: buttonProps,
-    triggerRef: buttonRef
+    triggerRef: buttonRef,
+    controlProps: _objectSpread(_objectSpread({}, controlProps), {}, {
+      onClick: handleInputOpen
+    })
   })), ___EmotionJSX(PopoverContainer, {
     isOpen: state.isOpen,
     ref: popoverRef,
@@ -369,6 +378,11 @@ ComboBoxField.propTypes = {
   /** @ignore */
   scrollBoxProps: PropTypes.shape({
     maxHeight: PropTypes.string
+  }),
+
+  /** Props object that is spread directly into the ComboBoxInput element. */
+  controlProps: PropTypes.shape({
+    onClick: PropTypes.func
   })
 };
 ComboBoxField.defaultProps = {

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -227,6 +227,20 @@ test('should open list on focus when menuTrigger is set to use focus', function
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(screen.queryAllByRole('option')).toHaveLength(items.length);
 });
+test('should open list on focus on click after selection when menuTrigger is set to use focus', function () {
+  getComponent({
+    menuTrigger: 'focus'
+  });
+  var input = screen.getByRole('combobox');
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  userEvent.click(input);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  userEvent.click(screen.queryAllByRole('option')[0]);
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveFocus();
+  userEvent.click(input);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var button = screen.queryByRole('button');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.10.0",
+  "version": "1.10.1-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",