SelectButton has no visible focus state

[daniele.pecora]

I got 2 issues with the select button widget.

1. The focus state.
When navigating with the TAB key no focus state is shown for the highlighted button the p-selectButton widget.

Watch the missing focus state and missing borders





The border-radius.
The first and the last button don't have any radius on their outer border.
Shouldn't they have also a border-radius the same size as all other buttons?

When presented on small devices (mobiles) the buttons are rendered correctly (but focus state still missing):




This is how I would expect the borders sould be





Regards



Here some SASS how to workaround:

Code: Select all

/**
 * missing borders on select-buttons for the first and last button
 * when showing buttons inlined.
 * this is the case on large screens (not mobiles).
 */
@media (min-width: 640px) {
  .ui-selectbutton {

    .ui-button {
      /** overide from _form.scss */
      &:not(.ui-state-active):not(.ui-state-disabled):hover {
        background-color: $primaryDarkColor;
      }

      /** overide from _form.scss */
      &.ui-state-active {
        background-color: $accentColor;
        color: $accentTextColor;
      }

      /**
       * add missing border-radius
       */
      &:first-of-type {
        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 3px 0 0 3px;
      }

      /**
       * add missing border-radius
       */
      &:last-of-type {
        -moz-border-radius: 0 3px 3px 0;
        -webkit-border-radius: 0 3px 3px 0;
        border-radius: 0 3px 3px 0;
      }

      /**
       * add missing focus state - state default
       */
      &:focus, &.ui-state-focus {
        background-color: lighten($primaryColor, 10%);
      }

      /**
       * add missing focus state - state activate
       */
      &.ui-state-active:focus, &.ui-state-active.ui-state-focus {
        background-color: lighten($accentColor, 10%);
      }
    }
  }
}

[merve7]

Hi,
Thank you for your feedback. We fixed for next release. You have code for fixing but also, you can use the below code in your stylesheet or in src/assets/sass/overrides/_theme_styles until release;

Code: Select all

.ui-buttonset {
    .ui-button {
        &:first-child {
            @include border-radius-left($borderRadius);
        }

        &:last-child {
            @include border-radius-right($borderRadius);
        }
        
        &.ui-state-focus {
            outline: 0 none;
            background-color: lighten($primaryColor,10%);
        }
    }
}

[daniele.pecora]

Yep. Thank you