Fix Smile-SA#2 by restoring legacy HTML content of the form.

botisSmile · Feb 3, 2021 · e8b6e99 · e8b6e99
1 parent 082014e
commit e8b6e99
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/view/frontend/react_source/ReactESAutocomplete.js b/view/frontend/react_source/ReactESAutocomplete.js
@@ -12,6 +12,9 @@ class ReactESAutocomplete extends Component {
         this.resultsElement = React.createRef();
 
         this.name = props.name || '';
+        this.title = props.title || '';
+        this.label = props.label || '';
+        this.submitButton = props.submitButton || '';
         this.placeholder = props.placeholder || '';
         this.maxLength = props.maxLength || 255;
         this.formSelector = props.formSelector || "#search_mini_form";
@@ -105,6 +108,9 @@ class ReactESAutocomplete extends Component {
             name,
             value,
             placeholder,
+            title,
+            label,
+            submitButton,
             maxLength,
             state : {
                 results,
@@ -113,25 +119,39 @@ class ReactESAutocomplete extends Component {
         } = this;
 
         return (
-            <div className="control">
-            <input id="search"
-                   type="text"
-                   name={name}
-                   defaultValue={value}
-                   placeholder={placeholder}
-                   className="input-text"
-                   maxLength={maxLength}
-                   role="combobox"
-                   aria-haspopup="false"
-                   aria-autocomplete="both"
-                   autoComplete="off"
-                   onChange={this.onChange.bind(this)}
-                   onBlur={this.toggle.bind(this)}
-                   onFocus={this.toggle.bind(this)}
-                   data-block="autocomplete-form" />
-
-                <Results ref={this.resultsElement} items={results} expanded={expanded}/>
-            </div>
+            <React.Fragment>
+                <div className="field search">
+                    <label className="label" htmlFor="search" data-role="minisearch-label">
+                        <span>{this.label}</span>
+                    </label>
+                    <div className="control">
+                        <input id="search"
+                               type="text"
+                               name={name}
+                               defaultValue={value}
+                               placeholder={placeholder}
+                               className="input-text"
+                               maxLength={maxLength}
+                               role="combobox"
+                               aria-haspopup="false"
+                               aria-autocomplete="both"
+                               autoComplete="off"
+                               onChange={this.onChange.bind(this)}
+                               onBlur={this.toggle.bind(this)}
+                               onFocus={this.toggle.bind(this)}
+                               data-block="autocomplete-form" />
+
+                            <Results ref={this.resultsElement} items={results} expanded={expanded}/>
+                    </div>
+                </div>
+                <div className="actions">
+                    <button type="submit"
+                            title={this.submitButton}
+                            className="action search">
+                        <span>{this.submitButton}</span>
+                    </button>
+                </div>
+            </React.Fragment>
         );
     }
 };

diff --git a/view/frontend/templates/search/form.mini.phtml b/view/frontend/templates/search/form.mini.phtml
@@ -107,7 +107,7 @@ $helper = $this->helper('Magento\Search\Helper\Data');
         <form class="form minisearch" id="search_mini_form" action="<?php /* @escapeNotVerified */ echo $helper->getResultUrl() ?>" method="get">
             <div class="field search">
                 <label class="label" for="search" data-role="minisearch-label">
-                    <span><?php /* @escapeNotVerified */ echo __('React SEARCH HTML'); ?></span>
+                    <span><?php /* @escapeNotVerified */ echo __('Search'); ?></span>
                 </label>
                 <div class="control">
                     <input id="search"
@@ -145,6 +145,9 @@ $helper = $this->helper('Magento\Search\Helper\Data');
         name:"<?php /* @escapeNotVerified */ echo $helper->getQueryParamName() ?>",
         maxLength: <?php /* @escapeNotVerified */ echo $helper->getMaxQueryLength();?>,
         placeholder:"<?php /* @escapeNotVerified */ echo __('Search entire store here...'); ?>",
+        title:"<?php echo $block->escapeHtml(__('Search')); ?>",
+        label:"<?php echo $block->escapeHtml(__('Search')); ?>",
+        submitButton:"<?php echo $block->escapeHtml(__('Search')); ?>",
         templates: <?php /* @noEscape */ echo $block->getJsonSuggestRenderers();?>,
         priceFormat : <?php /* @noEscape */ echo $block->getJsonPriceFormat();?>
     }