vutran / omnibar Goto Github PK

No way to set style for the <Omnibar/> component.

Ref: https://github.com/vutran/omnibar/blob/master/src/Omnibar.tsx#L145

Hi
I am trying to apply styles for result items
But when i use resultStyle it applies style only for 'ul' tag but not to 'a' tags inside.
How i can solve it?

When i'm done typing the in the omnibar, i should be able to choose a results but moving the up and down arrows then Enter to trigger and action.

@vutran

I just stumbled upon this useful library which doesnt seem to have been touched in a while...

Any plans to update?!

https://github.com/commitizen/cz-cli

This will be good to display history of actions when input is focused and empty

One way to do this is add an actual API exposed to the consumer here.

<Omnibar
     getRowStyle = () => {}
     getListStyle = () => {}
     getRootStyle = () => {}
     getInputStyle = () => {}
/>

// for row style
getRowStyle = ({ isFocused }) => {

}

// for list style
getListStyle = ({ isOpen }) => {}

// for the wrapping component
getRootStyle = ({ isLoadingSearchResults, isOpen }) => {}

// for the input
getInputStyle = ({ isFocused /*, isInvalid */ }) => {}

Now this is not much better that just plain style object, but this can offer some advantage. the naming is clear; row, list, input, and root (we can rename this to container). Also this could induce memoization on the consumer side which could be benefitial

v2.0.2 and v2.1.0

Hello. This is my first issue created for a project, so apologies in advance for any fumbling of this issues' submission.

High-level description

The Keyboard "Selected" index is not constrained when the number of results decreases. This makes it possible to select and submit options which are not visible.

Recreating the issue

• Type in a query which returns at least two results
• Press the down arrow key twice to select the second result
• Continue typing to reduce the result to a single result
• The second result is still considered "selected" and will be selected if enter is pressed at this point

One possible fix

query = (value: string) => {
    if (this.props.extensions.length > 0) {
        search<T>(value, this.props.extensions).then(results => {
            this.setState({
                results:
                    this.props.maxResults > 0
                        ? results.slice(0, this.props.maxResults)
                        : results,
                displayResults: results.length > 0,
                selectedIndex: Math.min(
                    this.state.selectedIndex,
                    results.length - 1
                ),
            });
            this.props.onQuery && this.props.onQuery(results);
        });
    }
};

Thank you for taking the time to publish and maintain omnibar.

If I want to programatically .focus() the input element, I have to use findDOMNode which is deprecated and on the way out.

It would be really useful to expose an option to pass a ref so I could manipulate the input field.

For example, using a keyboard shortcut and mousetrap.

export default function Omnisearch () {
  const inputRef = useRef(null)

  const focusSearch = (e) => {
    e.preventDefault()
    inputRef.focus()
  }

  useMousetrap('/', focusSearch)
  useMousetrap('s', focusSearch)

  return (
    <Omnibar
      inputRef={inputRef}
    />
  )
}

see the notes at https://omnibar.now.sh

According to the Contribution guideline we just "run the app", but there is no such command for yarn run in package.json

Care to clarify this?

First, this is a great component, thanks for sharing it!

I'm writing some simple specs using @testing-library/react and I'm getting this warning:

  console.error
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
        at Omnibar (/Users/.../node_modules/omnibar/dist/index.js:224:28)
        at Omnisearch

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnAboutUpdateOnUnmountedFiberInDEV (node_modules/react-dom/cjs/react-dom.development.js:23914:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21840:5)
      at Object.enqueueSetState (node_modules/react-dom/cjs/react-dom.development.js:12467:5)
      at Omnibar.Object.<anonymous>.Component.setState (node_modules/react/cjs/react.development.js:365:16)
      at node_modules/omnibar/dist/index.js:234:27

In doing some research, it looks like this may be of help => https://www.robinwieruch.de/react-warning-cant-call-setstate-on-an-unmounted-component

Does it look like maybe the component continues to get state updates after it is unmounted?

refs: https://github.com/blog/2111-issue-and-pull-request-templates

Github search change styles on focus.
What is the way to do this with omnibar?

Need to be able to set focus on the input either by exposing it through refs or a method on the omnibar class. Everything else has been straightforward—thanks!

Given the following code;

          <Omnibar
            extensions={[SearchExtension]}
            rootStyle={{
              border: '1px solid #f00',
              position: 'relative',
              marginTop: '50px',
            }}
            width={300}
          />

we get this

This now brings me back to my original concern of width and height

when we use the arrow keys to navigate up/down the list, our highlighting styles indicates clearly where we are within the list.

However, hovering with the mouse; we get the hovered item highlighted, while the previous item that we had navigated into retains its highlighted state.

I think this can be resolved partially/mitigated with #4,
but the underlying problem I've found is the scattered responsibility of setting the highlighted state. Here is what I found

• Omnibar: hoveredIndex
• ResultsItem: highlight => hover style appended