Show descriptions of roles on hover

package.json

@@ -224,7 +224,7 @@
     "react-modal": "^3.15.1",
     "react-player": "2.9.0",
     "react-radio-group": "^3.0.3",
-    "react-select": "^4.3.1",
+    "react-select": "^5.8.2",
     "react-sortable-hoc": "^1.11.0",
     "react-split-pane": "^0.1.92",
     "react-spreadsheet": "^0.5.14",

src/components/OptionWithTooltip.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import Tooltip from "react-tooltip-lite";
+import { lameta_orange } from "../containers/theme";
+import { OptionProps, GroupBase } from "react-select";
+import { CSSProperties } from "react";
+
+/* This is a custom option for react-select that shows a tooltip on hover. */
+
+interface OptionData {
+  value: string;
+  label: string;
+  title: string;
+  source?: string;
+}
+
+export const OptionWithTooltip = (
+  props: OptionProps<OptionData, false, GroupBase<OptionData>>
+) => {
+  const {
+    cx,
+    data,
+    className,
+    isDisabled,
+    isFocused,
+    isSelected,
+    innerRef,
+    innerProps,
+    getStyles
+  } = props;
+  return (
+    <Tooltip
+      direction="down"
+      content={<div style={{ overflowWrap: "break-word" }}>{data.title}</div>}
+      styles={{ display: "inline" }}
+      background={"#486BAD"}
+      color={"white"}
+    >
+      <div
+        {...innerProps} // Add this line to handle clicks and other events
+        style={{
+          ...(getStyles("option", props) as CSSProperties),
+          backgroundColor: props.isFocused ? lameta_orange : "white",
+          fontWeight: props.isSelected ? "bold" : "normal",
+          fontStyle: props.data.source === "custom" ? "italic" : "normal",
+          color: "black"
+        }}
+        className={cx(
+          {
+            option: true,
+            "option--is-disabled": isDisabled,
+            "option--is-focused": isFocused,
+            "option--is-selected": isSelected
+          },
+          className
+        )}
+        ref={innerRef}
+      >
+        {data.label}
+      </div>
+    </Tooltip>
+  );
+};

src/components/RoleChooser.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { observer } from "mobx-react";
-// tslint:disable-next-line:no-duplicate-imports
 import ReactSelectClass from "react-select";
 import { Contribution } from "../model/file/File";
 import { translateRole } from "../other/localization";
 import { titleCase } from "title-case";
 import { IChoice } from "../model/field/Field";
+import { OptionWithTooltip } from "./OptionWithTooltip";
+import { css } from "@emotion/react";
 
 export interface IProps {
   contribution: Contribution;
@@ -22,11 +23,11 @@ class RoleChooser extends React.Component<IProps> {
 
     const options = choices.map((c) => {
       const label = translateRole(c.id);
-      return new Object({
-        value: c.id, // this is snake case, as that's what we get from olac-roles.xml
+      return {
+        value: c.id, // snake case, matching olac-roles.xml
         label,
         title: c.description
-      });
+      };
     });
     const currentValueWrappedForSelect = {
       value: this.props.contribution.role,
@@ -43,6 +44,7 @@ class RoleChooser extends React.Component<IProps> {
           this.setState({});
         }}
         options={options}
+        components={{ Option: OptionWithTooltip }}
       />
     );
   }

src/components/session/FieldOpenChoiceChooser.tsx

@@ -1,12 +1,10 @@
 import * as React from "react";
 import { Field } from "../../model/field/Field";
 import { observer } from "mobx-react";
-// tslint:disable-next-line: no-submodule-imports
 import CreatableSelect from "react-select/creatable";
-import Tooltip from "react-tooltip-lite";
 import { lameta_orange } from "../../containers/theme";
-import { observable } from "mobx";
 import { CapitalCase } from "../../other/case";
+import { OptionWithTooltip } from "../OptionWithTooltip";
 
 //const Choices = new Dictionary<string, Array<string>>();
 
@@ -61,7 +59,7 @@ const FieldOpenChoiceChooser: React.FunctionComponent<{
     <div className={"field " + props.className}>
       <label>{label}</label>
       <CreatableSelect
-        tabIndex={props.tabIndex ? props.tabIndex.toString() : ""}
+        tabIndex={props.tabIndex ? props.tabIndex : undefined}
         //classNamePrefix="rs" // causes react-select to show you the parts of the control for styling, e.g. "rs-input"
         value={currentOption}
         placeholder=""
@@ -110,57 +108,11 @@ const FieldOpenChoiceChooser: React.FunctionComponent<{
             CapitalCase(s && s.value ? s.value : "")
           );
         }}
-        components={{ Option: CustomOption }}
+        components={{ Option: OptionWithTooltip }}
         options={options}
       />
     </div>
   );
 };
 
 export default observer(FieldOpenChoiceChooser);
-
-const CustomOption = (optionProps) => {
-  const {
-    cx,
-    data,
-    className,
-    isDisabled,
-    isFocused,
-    isSelected,
-    innerRef,
-    innerProps,
-    getStyles
-  } = optionProps;
-  return (
-    <Tooltip
-      direction="down"
-      content={<div style={{ overflowWrap: "break-word" }}>{data.title}</div>}
-      styles={{ display: "inline" }}
-      background={"#486BAD"}
-      color={"white"}
-    >
-      <div
-        {...innerProps}
-        style={{
-          ...getStyles("option", optionProps),
-          backgroundColor: optionProps.isFocused ? lameta_orange : "white",
-          fontWeight: optionProps.isSelected ? "bold" : "normal",
-          fontStyle: optionProps.data.source === "custom" ? "italic" : "",
-          color: "black"
-        }}
-        className={cx(
-          {
-            option: true,
-            "option--is-disabled": isDisabled,
-            "option--is-focused": isFocused,
-            "option--is-selected": isSelected
-          },
-          className
-        )}
-        ref={innerRef}
-      >
-        {data.label}
-      </div>
-    </Tooltip>
-  );
-};