#3698: Fix advancedSingleSelect widget

NCI-Agency · Aug 11, 2021 · df518f0 · df518f0
1 parent 7d4b15c
commit df518f0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 26 deletions.
diff --git a/client/src/components/UltimatePagination.js b/client/src/components/UltimatePagination.js
@@ -9,7 +9,7 @@ const paginationLinkPropTypes = {
 }
 
 const PageLink = ({ value, isActive, onClick }) => (
-  <Pagination.Item active={isActive} onClick={onClick}>
+  <Pagination.Item active={isActive} activeLabel="" onClick={onClick}>
     {value}
   </Pagination.Item>
 )

diff --git a/client/src/components/advancedSelectWidget/AdvancedSelect.css b/client/src/components/advancedSelectWidget/AdvancedSelect.css
@@ -1,20 +1,20 @@
-.border-between > [class*='col-']:before,
-.border-between > [class*='col-']:after {
+.border-between > [class*="col-"]:before,
+.border-between > [class*="col-"]:after {
   background: #e3e3e3;
   bottom: 0;
   content: " ";
   position: absolute;
   width: 1px;
   top: 0;
 }
-.border-between > [class*='col-']:before {
+.border-between > [class*="col-"]:before {
   left: 0;
 }
-.border-between > [class*='col-']:after {
+.border-between > [class*="col-"]:after {
   right: -1px;
 }
-.border-between > [class*='col-']:first-child:before,
-.border-between > [class*='col-']:last-child:after {
+.border-between > [class*="col-"]:first-child:before,
+.border-between > [class*="col-"]:last-child:after {
   display: none;
 }
 
@@ -35,7 +35,7 @@
   background-color: #e0e0e0;
 }
 .advanced-select-filters > li.active > button {
-  border: 2px solid #1772B8;
+  border: 2px solid #1772b8;
 }
 
 .advanced-select-popover table > tbody > tr > td {
@@ -45,3 +45,11 @@
 .advanced-select-popover > .bp3-overlay > .bp3-transition-container {
   width: 100%;
 }
+
+a.page-link span.sr-only {
+  display: none;
+}
+
+span.page-link span.sr-only {
+  display: none;
+}
diff --git a/client/src/components/advancedSelectWidget/AdvancedSelect.js b/client/src/components/advancedSelectWidget/AdvancedSelect.js
@@ -2,7 +2,6 @@ import { gql } from "@apollo/client"
 import { Popover2, Popover2InteractionKind } from "@blueprintjs/popover2"
 import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"
 import API from "api"
-import * as FieldHelper from "components/FieldHelper"
 import UltimatePagination from "components/UltimatePagination"
 import _isEmpty from "lodash/isEmpty"
 import _isEqualWith from "lodash/isEqualWith"
@@ -367,22 +366,35 @@ const AdvancedSelect = ({
                   }
                 }}
               >
-                <Form.Control
-                  name={fieldName}
-                  value={searchTerms || ""}
-                  placeholder={placeholder}
-                  onChange={changeSearchTerms}
-                  onFocus={event => handleInteraction(true, event)}
-                  ref={ref => {
-                    searchInput.current = ref
-                  }}
-                  disabled={disabled}
-                />
+                <InputGroup>
+                  <Form.Control
+                    name={fieldName}
+                    value={searchTerms || ""}
+                    placeholder={placeholder}
+                    onChange={changeSearchTerms}
+                    onFocus={event => handleInteraction(true, event)}
+                    ref={ref => {
+                      searchInput.current = ref
+                    }}
+                    disabled={disabled}
+                  />
+                  {addon && (
+                    <InputGroup.Text
+                      style={{
+                        maxHeight: "38px",
+                        borderTopLeftRadius: 0,
+                        borderBottomLeftRadius: 0,
+                        textSizeAdjust: "10px"
+                      }}
+                    >
+                      <img src={addon} style={{ height: "25px" }} />
+                    </InputGroup.Text>
+                  )}
+                  {extraAddon && (
+                    <InputGroup.Text>{extraAddon}</InputGroup.Text>
+                  )}
+                </InputGroup>
               </Popover2>
-              {extraAddon && <InputGroup>{extraAddon}</InputGroup>}
-              {addon && (
-                <FieldHelper.FieldAddon fieldId={fieldName} addon={addon} />
-              )}
             </InputGroup>
           </div>
           <AdvancedSelectTarget overlayRef={overlayContainer} />

diff --git a/client/src/components/advancedSelectWidget/AdvancedSelectOverlayTable.js b/client/src/components/advancedSelectWidget/AdvancedSelectOverlayTable.js
@@ -3,7 +3,7 @@ import LoaderHOC from "HOC/LoaderHOC"
 import _isEmpty from "lodash/isEmpty"
 import PropTypes from "prop-types"
 import React from "react"
-import { Table, ToggleButton } from "react-bootstrap"
+import { Form, Table } from "react-bootstrap"
 
 const AdvancedSelectOverlayTable = ({
   fieldName,
@@ -74,7 +74,7 @@ const AdvancedSingleSelectOverlayTableBase = ({
   <AdvancedSelectOverlayTable
     {...otherProps}
     selectedItems={_isEmpty(selectedItems) ? [] : [selectedItems]}
-    selectItemComponent={<ToggleButton type="radio" />}
+    selectItemComponent={<Form.Check type="radio" />}
   />
 )
 AdvancedSingleSelectOverlayTableBase.propTypes = {