Allow focus and navigation on disabled tags

[djtcin]

Currently PolyLookupComponent does not allow tag navigation when the control is set as disabled, at least that's how it behaved for me. It would be nice to allow this action even when it is set as disabled. Navigation is not a change, I don't see way it should be blocked.

[khoait]

hi @djtcin thanks for your suggestion! let me confirm that you want to be able to click on the tag and navigate/open the selected tag, right?

[djtcin]

That's right!
I was quite intrigued about how it blocked actions without an explicit css class, so I did a little investigation. It shouldn't be complicated, to reenable actions all we have to do is set content: none; at .ms-BasePicker-text:after. We already have a code that alters this css at PolyLookupControl.tsx > TagPicker render > styles :

styles={({ isFocused }) => {
        // eslint-disable-next-line react/prop-types
        const pickerStyles: Partial<IBasePickerStyles> = {
         ...
          text: {
            ...
            "&:after": {
              content: disabled && !allowTagActionsDisabled ? '""' : "none",

In this exampleallowTagActionsDisabled is the property that enables navigation actions on disabled, in case this is not a desirable default action.
Besides that, we would need to fix the background color at .ms-TagItem:focus-within to give back the primary color on click action.

I'm sorry if I went ahead of myself with "giving the solution" thing, I thought it would be a waste not to pass down the result of my tests, I hope it will be helpful if we follow with this idea :)

[khoait]

No problem at all! Much appreciated your effort! All contribution to make the repo more helpful are welcomed!

I'll test it from my side and include it in the next release.

Thanks!

[djtcin]

That's great! Thank you!

[khoait]

@djtcin this is fixed and will be included in the next release 1.0.0.7. my fix is a bit different though. cheers!