Skip to content

Commit

Permalink
Fix search tooltip interaction (#685)
Browse files Browse the repository at this point in the history
  • Loading branch information
@InfiniteStash
InfiniteStash authored Jul 16, 2023
1 parent 0624309 commit ce573b2
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 58 deletions.
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"p-debounce": "^4.0.0",
"query-string": "^8.1.0",
"react": "^18.2.0",
"react-bootstrap": "^2.7.2",
"react-bootstrap": "^2.8.0",
"react-bootstrap-typeahead": "^6.0.2",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/fragments/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@ const Tooltip: FC<Props> = ({
}) => (
<OverlayTrigger
delay={{ show: delay, hide: 0 }}
overlay={<BSTooltip id="tooltip">{text}</BSTooltip>}
overlay={
<BSTooltip className="Tooltip" id="tooltip">
{text}
</BSTooltip>
}
show={text ? undefined : false}
placement={placement}
trigger={["hover", "focus"]}
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/fragments/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,9 @@

.SearchHint {
margin-left: 10px;
margin-right: 7px;
cursor: help;
}

.Tooltip {
position: absolute !important;
}
6 changes: 3 additions & 3 deletions frontend/src/components/searchField/SearchField.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FC, KeyboardEvent, useRef, useState } from "react";
import { useApolloClient } from "@apollo/client";
import { OnChangeValue } from "react-select";
import { OnChangeValue, components } from "react-select";
import Async from "react-select/async";
import debounce from "p-debounce";
import { useNavigate } from "react-router-dom";
Expand Down Expand Up @@ -234,10 +234,10 @@ const SearchField: FC<SearchFieldProps> = ({
components={{
DropdownIndicator: () => null,
IndicatorSeparator: () => null,
ValueContainer: ({ children }) => (
ValueContainer: (props) => (
<>
<SearchHint />
{children}
<components.ValueContainer {...props} />
</>
),
}}
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/studioSelect/StudioSelect.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { FC } from "react";
import { components } from "react-select";
import Async from "react-select/async";
import { useApolloClient } from "@apollo/client";
import debounce from "p-debounce";
Expand Down Expand Up @@ -132,10 +133,10 @@ const StudioSelect: FC<StudioSelectProps> = ({
isClearable={isClearable}
formatOptionLabel={formatStudioName}
components={{
ValueContainer: ({ children }) => (
ValueContainer: (props) => (
<>
<SearchHint />
{children}
<components.ValueContainer {...props} />
</>
),
}}
Expand Down
134 changes: 84 additions & 50 deletions frontend/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -597,7 +597,7 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7":
"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7":
version "7.16.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
Expand All @@ -611,27 +611,27 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.17.2", "@babel/runtime@^7.7.2":
version "7.17.9"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.18.3":
version "7.18.9"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.20.7":
version "7.21.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
dependencies:
regenerator-runtime "^0.13.11"

"@babel/runtime@^7.21.0":
version "7.22.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
dependencies:
regenerator-runtime "^0.13.11"

"@babel/runtime@^7.7.2":
version "7.17.9"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
dependencies:
regenerator-runtime "^0.13.4"

"@babel/template@^7.18.10", "@babel/template@^7.18.6":
version "7.18.10"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
Expand Down Expand Up @@ -1626,17 +1626,17 @@
tslib "^2.4.0"
webcrypto-core "^1.7.4"

"@popperjs/core@^2.10.2", "@popperjs/core@^2.11.5", "@popperjs/core@^2.11.6":
"@popperjs/core@^2.10.2", "@popperjs/core@^2.11.6":
version "2.11.6"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==

"@react-aria/ssr@^3.2.0":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.3.0.tgz#25e81daf0c7a270a4a891159d8d984578e4512d8"
integrity sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==
"@react-aria/ssr@^3.5.0":
version "3.7.0"
resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.7.0.tgz#7eda2964ab792dc1c3a1fdacbf5bfb185590e9a5"
integrity sha512-bfufjg4ESE5giN+Fxj1XIzS5f/YIhqcGc+Ve+vUUKU8xZ8t/Xtjlv8F3kjqDBQdk//n3mluFY7xG1wQVB9rMLQ==
dependencies:
"@babel/runtime" "^7.6.2"
"@swc/helpers" "^0.5.0"

"@remix-run/router@1.3.2":
version "1.3.2"
Expand All @@ -1655,26 +1655,26 @@
dependencies:
dequal "^2.0.2"

"@restart/hooks@^0.4.6":
version "0.4.6"
resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.6.tgz#15dcf34631a618c513efc924705c7cbe349a4a0c"
integrity sha512-FzpEzy6QeLB3OpUrC9OQD/lWCluQmilLfRGa/DqbB6OmV05AEt/0Lgn3Jf6l27UIJMK0qFmNcps6p8DNLXa6Pw==
"@restart/hooks@^0.4.9":
version "0.4.10"
resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.10.tgz#651741c7965738650e8a2c3d5624a85892f05376"
integrity sha512-HVZhYHb+9xnN6vDPyiTmw6N4V5wD9tatL3y0zpHFeeatP1ooOD1edzd3MnJCXYlb3OeleDg+Vv16EikGrH57eA==
dependencies:
dequal "^2.0.2"
dequal "^2.0.3"

"@restart/ui@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.4.1.tgz#c9057915f0708c411824eeb16c03d0108c0208d2"
integrity sha512-J7wFOx2DcmkBqCqiZgDsggLO7faiNh4Nv1/v80FmbRgP+MYpwaVDKKXLC69DA4+ejgNIsBP5ORtC74EZqO1j8A==
"@restart/ui@^1.6.3":
version "1.6.6"
resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.6.6.tgz#3481e2eaf15d7cae55bb2f518624e10d19c75800"
integrity sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==
dependencies:
"@babel/runtime" "^7.18.3"
"@popperjs/core" "^2.11.5"
"@react-aria/ssr" "^3.2.0"
"@restart/hooks" "^0.4.7"
"@babel/runtime" "^7.21.0"
"@popperjs/core" "^2.11.6"
"@react-aria/ssr" "^3.5.0"
"@restart/hooks" "^0.4.9"
"@types/warning" "^3.0.0"
dequal "^2.0.2"
dequal "^2.0.3"
dom-helpers "^5.2.0"
uncontrollable "^7.2.1"
uncontrollable "^8.0.1"
warning "^4.0.3"

"@rollup/plugin-graphql@^2.0.3":
Expand Down Expand Up @@ -1760,6 +1760,13 @@
"@swc/core-win32-ia32-msvc" "1.3.36"
"@swc/core-win32-x64-msvc" "1.3.36"

"@swc/helpers@^0.5.0":
version "0.5.1"
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a"
integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==
dependencies:
tslib "^2.4.0"

"@tootallnate/once@2":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
Expand Down Expand Up @@ -1923,13 +1930,20 @@
dependencies:
"@types/react" "*"

"@types/react-transition-group@^4.4.0", "@types/react-transition-group@^4.4.4":
"@types/react-transition-group@^4.4.0":
version "4.4.4"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
dependencies:
"@types/react" "*"

"@types/react-transition-group@^4.4.5":
version "4.4.6"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
dependencies:
"@types/react" "*"

"@types/react@*", "@types/react@>=16.9.11":
version "17.0.37"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
Expand Down Expand Up @@ -2717,7 +2731,7 @@ classnames@^2.2.0, classnames@^2.3.2:
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==

classnames@^2.2.5, classnames@^2.3.1:
classnames@^2.2.5:
version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
Expand Down Expand Up @@ -3084,6 +3098,11 @@ dequal@^2.0.0, dequal@^2.0.2:
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==

dequal@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==

detect-indent@^6.0.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
Expand Down Expand Up @@ -5967,21 +5986,21 @@ react-bootstrap-typeahead@^6.0.2:
scroll-into-view-if-needed "^2.2.20"
warning "^4.0.1"

react-bootstrap@^2.7.2:
version "2.7.2"
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.7.2.tgz#100069ea7b4807cccbc5fef1e33bc90283262602"
integrity sha512-WDSln+mG4RLLFO01stkj2bEx/3MF4YihK9D/dWnHaSxOiQZLbhhlf95D2Jb20X3t2m7vMxRe888FVrfLJoGmmA==
dependencies:
"@babel/runtime" "^7.17.2"
"@restart/hooks" "^0.4.6"
"@restart/ui" "^1.4.1"
"@types/react-transition-group" "^4.4.4"
classnames "^2.3.1"
react-bootstrap@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.8.0.tgz#781f254b33090c1d50ed521b40697727267c6add"
integrity sha512-e/aNtxl0Z2ozrIaR82jr6Zz7ss9GSoaXpQaxmvtDUsTZIq/XalkduR/ZXP6vbQHz2T4syvjA+4FbtwELxxmpww==
dependencies:
"@babel/runtime" "^7.21.0"
"@restart/hooks" "^0.4.9"
"@restart/ui" "^1.6.3"
"@types/react-transition-group" "^4.4.5"
classnames "^2.3.2"
dom-helpers "^5.2.1"
invariant "^2.2.4"
prop-types "^15.8.1"
prop-types-extra "^1.1.0"
react-transition-group "^4.4.2"
react-transition-group "^4.4.5"
uncontrollable "^7.2.1"
warning "^4.0.3"

Expand Down Expand Up @@ -6122,7 +6141,7 @@ react-side-effect@^2.1.0:
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==

react-transition-group@^4.3.0, react-transition-group@^4.4.2:
react-transition-group@^4.3.0:
version "4.4.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
Expand All @@ -6132,6 +6151,16 @@ react-transition-group@^4.3.0, react-transition-group@^4.4.2:
loose-envify "^1.4.0"
prop-types "^15.6.2"

react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"

react@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
Expand Down Expand Up @@ -7098,6 +7127,11 @@ uncontrollable@^7.2.1:
invariant "^2.2.4"
react-lifecycles-compat "^3.0.4"

uncontrollable@^8.0.1:
version "8.0.2"
resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-8.0.2.tgz#ed11b9b6c785b6a471365bcd9a6789cebc4c7849"
integrity sha512-/GDx+K1STGtpgTsj5Dj3J51YaKxZDblbCQHTH1zHLuoBEWodj6MjtRVv3TUijj1JYLRLSFsFzN8NV4M3QV4d9w==

undici@^5.8.0:
version "5.20.0"
resolved "https://registry.yarnpkg.com/undici/-/undici-5.20.0.tgz#6327462f5ce1d3646bcdac99da7317f455bcc263"
Expand Down

0 comments on commit ce573b2

Please sign in to comment.