Fix anchor select field component

client/src/components/AnchorSelectorField/AnchorSelectorField.js

@@ -8,7 +8,8 @@ import SilverStripeComponent from 'lib/SilverStripeComponent';
 import * as anchorSelectorActions from 'state/anchorSelector/AnchorSelectorActions';
 import anchorSelectorStates from 'state/anchorSelector/AnchorSelectorStates';
 import fieldHolder from 'components/FieldHolder/FieldHolder';
-import { Creatable } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import EmotionCssCacheProvider from 'containers/EmotionCssCacheProvider/EmotionCssCacheProvider';
 import getFormState from 'lib/getFormState';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
@@ -117,26 +118,26 @@ class AnchorSelectorField extends SilverStripeComponent {
   }
 
   render() {
-    const inputProps = {
-      id: this.props.id,
-    };
     const className = classnames('anchorselectorfield', this.props.extraClass);
     const options = this.getDropdownOptions();
-    const value = this.props.value || '';
+    const rawValue = this.props.value || '';
     const placeholder = i18n._t('CMS.ANCHOR_SELECT_OR_TYPE', 'Select or enter anchor');
     return (
-      <Creatable
-        searchable
-        options={options}
-        className={className}
-        name={this.props.name}
-        inputProps={inputProps}
-        onChange={this.handleChange}
-        onBlurResetsInput
-        value={value}
-        placeholder={placeholder}
-        labelKey="value"
-      />
+      <EmotionCssCacheProvider>
+        <CreatableSelect
+          isSearchable
+          isClearable
+          options={options}
+          className={className}
+          name={this.props.name}
+          onChange={this.handleChange}
+          value={{value: rawValue}}
+          noOptionsMessage={() => i18n._t('CMS.ANCHOR_NO_OPTIONS', 'No options')}
+          placeholder={placeholder}
+          getOptionLabel={({ value }) => value}
+          classNamePrefix="anchorselectorfield"
+        />
+      </EmotionCssCacheProvider>
     );
   }
 }

tests/behat/features/insert-anchor-link.feature

@@ -19,12 +19,10 @@ So that I can link to a external website or a page on my site
       And I press the "Insert link" HTML field button
       And I click "Anchor on a page" in the ".tox-collection__group" element
     Then I should see an "form#Form_editorAnchorLink" element
-      And I should see "About Us" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-    When I click "About Us" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-      And I click "Details" in the "#Form_editorAnchorLink_PageID_Holder .Select-menu-outer" element
-      And I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
-      And I click "youranchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-    Then I should see "youranchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
+      And I should see "About Us" in the ".treedropdownfield__value-container" element
+    When I select "Details" in the "#Form_editorAnchorLink_PageID_Holder" tree dropdown
+      And I select "youranchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
+    Then I should see "youranchor" in the ".anchorselectorfield__value-container" element
     When I fill in "my desc" for "Link description"
       And I press the "Insert link" button
     Then the "Content" HTML field should contain "<a title="my desc" href="[sitetree_link,id=3]#youranchor">awesome</a>"
@@ -36,11 +34,9 @@ So that I can link to a external website or a page on my site
       And I press the "Insert link" HTML field button
       And I click "Anchor on a page" in the ".tox-collection__group" element
     Then I should see an "form#Form_editorAnchorLink" element
-      And I should see "About Us" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-    When I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
-    Then I should see "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-    When I click "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-    Then I should see "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
+      And I should see "About Us" in the ".treedropdownfield__value-container" element
+    When I select "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
+    Then I should see "dataobject-anchor" in the ".anchorselectorfield__value-container" element
     When I fill in "my desc" for "Link description"
       And I press the "Insert link" button
     Then the "Content" HTML field should contain "<a title="my desc" href="[sitetree_link,id=2]#dataobject-anchor">awesome</a>"
@@ -53,12 +49,11 @@ So that I can link to a external website or a page on my site
       And I press the "Insert link" HTML field button
       And I click "Anchor on a page" in the ".tox-collection__group" element
     Then I should see an "form#Form_editorAnchorLink" element
-      And I should see "About Us" in the "#Form_editorAnchorLink_PageID_Holder .Select-multi-value-wrapper" element
-    When I click "Select or enter anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-multi-value-wrapper" element
-    Then I should see "unsaved-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-      And I should see "dataobject-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-    When I click "unsaved-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-menu-outer" element
-    Then I should see "unsaved-anchor" in the "#Form_editorAnchorLink_Anchor_Holder .Select-value" element
+      And I should see "About Us" in the ".treedropdownfield__value-container" element
+    When I click on the ".anchorselectorfield__dropdown-indicator" element
+      Then I should see "dataobject-anchor" in the ".anchorselectorfield__menu-list" element
+    When I select "unsaved-anchor" in the "#Form_editorAnchorLink_Anchor_Holder" anchor dropdown
+    Then I should see "unsaved-anchor" in the ".anchorselectorfield__value-container" element
     When I fill in "my desc" for "Link description"
       And I press the "Insert link" button
     Then the "Content" HTML field should contain "<a title="my desc" href="[sitetree_link,id=2]#unsaved-anchor">awesome</a>"

tests/behat/src/FixtureContext.php

@@ -8,6 +8,7 @@
 use PHPUnit\Framework\Assert;
 use SilverStripe\BehatExtension\Context\BasicContext;
 use SilverStripe\BehatExtension\Context\FixtureContext as BehatFixtureContext;
+use SilverStripe\BehatExtension\Utility\StepHelper;
 use SilverStripe\CMS\Model\RedirectorPage;
 use SilverStripe\CMS\Model\SiteTree;
 use SilverStripe\Core\ClassInfo;
@@ -20,6 +21,8 @@
  */
 class FixtureContext extends BehatFixtureContext
 {
+    use StepHelper;
+
     /**
      * @var BasicContext
      */
@@ -139,4 +142,33 @@ public function theSiteTreeOrderShouldBe($expected)
         $actual = $this->getMainContext()->getSession()->evaluateScript($js);
         Assert::assertEquals($expected, $actual);
     }
+
+    /**
+     * Select a value in the anchor selector field
+     *
+     * @When /^I select "([^"]*)" in the "([^"]*)" anchor dropdown$/
+     */
+    public function iSelectValueInAnchorDropdown($text, $selector)
+    {
+        $page = $this->getMainContext()->getSession()->getPage();
+        /** @var NodeElement $parentElement */
+        $parentElement = null;
+        $this->retryThrowable(function () use (&$parentElement, &$page, $selector) {
+            $parentElement = $page->find('css', $selector);
+            Assert::assertNotNull($parentElement, sprintf('"%s" element not found', $selector));
+            $page = $this->getMainContext()->getSession()->getPage();
+        });
+
+        $this->retryThrowable(function () use ($parentElement, $selector) {
+            $dropdown = $parentElement->find('css', '.anchorselectorfield__dropdown-indicator');
+            Assert::assertNotNull($dropdown, sprintf('Unable to find the dropdown in "%s"', $selector));
+            $dropdown->click();
+        });
+
+        $this->retryThrowable(function () use ($text, $parentElement, $selector) {
+            $element = $parentElement->find('xpath', sprintf('//*[count(*)=0 and .="%s"]', $text));
+            Assert::assertNotNull($element, sprintf('"%s" not found in "%s"', $text, $selector));
+            $element->click();
+        });
+    }
 }