Improve implementation in Author dropdown on commits page
<!--IssueSummary start-->
<details>
<summary>
Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards.
</summary>
- [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=217701)
</details>
<!--IssueSummary end-->
The following discussion from !31686 should be addressed:
- [ ] @dmishunov started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/31686#note_341534370): (+1 comment)
> Another thing that I've noticed here, @sming-gitlab that was, actually, introduced in [another MR of yours](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28509). This button has an odd mess with the `:disabled` props. Technically, it's always set to ON on either the parent DIV or the dropdown itself:
>
> ```html
> <div ref="dropdownContainer" v-gl-tooltip :title="tooltipTitle" :disabled="!hasSearchParam">
> <gl-new-dropdown
> :text="dropdownText"
> :disabled="hasSearchParam"
> ...
> ```
>
> Why so? Do I understand right that `:disabled` on the parent DIV is just to not show the tooltip when `hasSearchParam` is `false`? If it' not the case, please, do explain me since I don't understand this.
>
> If this is the case, however, that's not how we should disable tooltips, I'm afraid: you simply have to return some falsey value as the tooltip text (`undefined`, `null`, `''`). But the irony is that `false` itself (as it turns out [in your check](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/projects/commits/components/author_select.vue#L50) when `this.hasSearchParam` is `false`) doesn't do what you want: it simply does not set the `title` attribute to the parent DIV (in HTML: `<div>...</div>`) that, having the directive on this element, still generates the tooltip even though an empty one. What you need is to still keep the title attribute but make sure it doesn't have any value (in HTML: `<div title>...</div>`): this is the scenario to prevent the tooltip from being shown.
>
> Here is the patch to better explain the correct handling of "not showing" the tooltip:
>
> ```patch
> Index: app/assets/javascripts/projects/commits/components/author_select.vue
> IDEA additional info:
> Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
> <+>UTF-8
> ===================================================================
> --- app/assets/javascripts/projects/commits/components/author_select.vue (revision 697d0734f1ae469a9a3522838e36b435d7cdf0be)
> +++ app/assets/javascripts/projects/commits/components/author_select.vue (date 1589358185344)
> @@ -47,7 +47,7 @@
> return this.currentAuthor || __('Author');
> },
> tooltipTitle() {
> - return this.hasSearchParam && tooltipMessage;
> + return this.hasSearchParam? tooltipMessage: '';
> },
> },
> mounted() {
> @@ -106,7 +106,7 @@
> </script>
>
> <template>
> - <div ref="dropdownContainer" v-gl-tooltip :title="tooltipTitle" :disabled="!hasSearchParam">
> + <div ref="dropdownContainer" v-gl-tooltip :title="tooltipTitle">
> <gl-new-dropdown
> :text="dropdownText"
> :disabled="hasSearchParam"
>
> ```
>
> Please, feel free to resolve this issue either in this MR, or create a follow-up to handle this issue. Thanks :smile:
issue