villebro commented on a change in pull request #13029:
URL: https://github.com/apache/superset/pull/13029#discussion_r575821616



##########
File path: 
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx
##########
@@ -379,12 +386,25 @@ export default class 
AdhocFilterEditPopoverSimpleTabContent extends React.Compon
               name="filter-value"
               {...comparatorSelectProps}
               getPopupContainer={triggerNode => triggerNode.parentNode}
+              onSearch={val => this.setState({ currentSuggestionSearch: val })}
+              onSelect={this.clearSuggestionSearch}
+              onBlur={this.clearSuggestionSearch}
             >
               {this.state.suggestions.map(suggestion => (
                 <Select.Option value={suggestion} key={suggestion}>
                   {suggestion}
                 </Select.Option>
               ))}
+
+              {/* enable selecting an option not included in suggestions */}
+              {currentSuggestionSearch &&
+                !this.state.suggestions.some(
+                  suggestion => suggestion === currentSuggestionSearch,
+                ) && (
+                  <Select.Option value={currentSuggestionSearch}>
+                    {currentSuggestionSearch}
+                  </Select.Option>
+                )}

Review comment:
       I think adding a wrapper that hides the specifics of how the component 
actually implements the creatable option sounds like a good option. To my 
understanding this is essentially how the migration process has been carried 
out this far, i.e. importing components from `src/common/components/`, where we 
start out by just exporting the vanilla component, and later extending the 
component if needed. This way we can later much easier swap out the 
implementation of said component if a new better library comes along (or if the 
current implementation ends up being more problematic than we had envisioned).
   
   Btw, I looked at what the current react-select implementation looks like in 
the Filter Box, and that flow seems quite hacky to the end user (see below). 
The select control that's used in the control panel isn't as bad, but it does 
go to show that the react-select experience in Superset has not been optimal 
from a UX perspective, either.
   
![filterbox_select](https://user-images.githubusercontent.com/33317356/107879908-4e49f280-6ee4-11eb-93e2-1781fbcf6019.gif)
   




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
[email protected]



---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to