Faking Disabled Dropdowns

Creative problem solving is key in a corporate environment

Working in the corporate world things are not as easy as when you're working on your own little project in your spare time. This is not news to anyone. Sooner or later we all end up in a situation where the simple solution to a problem is not workable due to the large and complex nature of these companies. Whether its being unable to update a package, working with legacy code, or having to use internal tools or component libraries; There are always challenges working for a big company that you won't find anywhere else. That is when you have to get creative with your problem solving.

Recently I ran into one of these issues myself, working for a big company, having to use an internally built component library that was sorely lacking in features. In this case, I was using a dropdown component built using <div> and <ul> tags, without an input element. This meant that, obviously, the component will be missing out on getting certain features for free that come as part of the input element. This included the disabled feature.

For those unaware, a html input can take a disabled prop:

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input.

We were using these dropdowns to allow users to filter data on the page. My task was to include a switch on the page, which would disable the dropdowns, preventing the user from changing the filters until the switch was turned off again. A simple problem in a different place. Since the component we were using did not have use of the input element's built in disabled function, and the developer who built it, had not replicated it, there was no way to disable these dropdowns.

I did not have access to the component library to make a change and try to add this feature in, nor did I have time to try to find who is in charge of this library and ask them to change it. I needed to get creative. So I faked it.

Faking it

Let's start off with the filters ready and working, and the new switch added next to them.

At this point the dropdowns work, and the switch does nothing. Since we can't just pass a disabled prop to the component and watch it work, we need a new solution. I decided that if I can't stop the dropdowns from working, I could stop the user from clicking them. So I decided to add a blocker between the user and component.

I added a <span> that will be added to the dropdown container whenever the switch is turned on. The <span> fills the container and sits on top of the component, so the user is clicking the <span> and not the actual component.

.dropdown-disabled {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

I then added a colour to the span, and made it transparent. This combined with changing the cursor to cursor: not-allowed makes it look the dropdowns are greyed out, and unusable. And voilá, the user cannot use the dropdowns, so for all intents and purposes, they are now disabled, using little more than some creative problem solving and some css.

  box-shadow: inset 100px 100px rgba(0, 0, 0, 0.25);
  cursor: not-allowed;

How would you solve this issue? Have you any similar stories? Let me know in the comments, I'd love to hear them!