[Navigation.Section] -> Make 'items.url' optional for 'items.selected to' work

[mayurc137]

Issue summary

Navigation.Section -> items.url required for items.selected to work

Expected behavior

When changing tab through nextjs/router the Navigation.Sections items.selected state if updated irrespective of the url being set. When the router changes and the items.selected is set the UI state of the navigation tab should change to selected.

Actual behavior

Navigation.Section -> items.selected doesn't work if url is not set in the Navigation Section items array. I am changing the route through nextjs/router. When setting the route trying to update
items.selected attribute it doesn't update the selected Navigation item.

<Navigation.Section items={[ { label: 'Label', icon: ArrowLeftMinor, selected:true }, ]} />

Steps to reproduce the problem

1. Create a Navigation.Section component
2. Do not set the url value of its items
3. Try to update the selected value of an item
4. The Navigation selected tab doesn't update to the selected UI state
5. When url is mentioned the Naviation selected tab updates its UI state

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

 System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz
    Memory: 83.68 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 9.9.0 - ~/.nvm/versions/node/v9.9.0/bin/node
    Yarn: 1.3.2 - ~/.yarn/bin/yarn
    npm: 6.14.2 - ~/.nvm/versions/node/v9.9.0/bin/npm
  Browsers:
    Safari: 13.0.5

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[felipebrahm]

+1 for this issue. I'm also using next.js (and using its router in a Navigation.Item onClick attribute). It took me a while to figure out why only some attributes from the documentation actually work and others don't. I noticed neither selected nor new work. I just looked at the code and for some reason there's lots of code that is ignored if no url is passed.

[jogly]

Encountered this issue as well. I've worked around this by making an adaptor for NextJS's Link from Polaris expectation:

import NextLink from 'next/link'                                                
                                                                                
/**                                                                             
 * Maps a Polaris link props to NextJS Link props so that navigation using      
 * Polaris actions doesn't cause a page refresh.
 */                                                                             
const Link = ({ url, children, ...props }) => {                                 
  return (<NextLink href={url} passHref><a {...props}>{children}</a></NextLink>)
}                                                                               
export default Link                                                             

and then told AppProvider to use my Link component instead, e.g.:

import MyLink from 'components/Link'
<AppProvider                            
  i18n={translations}                   
  linkComponent={MyLink} >                
  {children}
</AppProvider>

which allowed me to use the url prop of Navigation.Item as docs have it. The only gotcha I encountered is the root url for Home in my case needed exactMatch otherwise it was highlighted for every path:

<Navigation.Section
  fill
  items={[
    {
      url: '/',
      exactMatch: true,
      label: 'Home',
      icon: HomeMajor
    }
  ]}
/>

[felipebrahm]

Why was this closed, @mayurc137? This still isn't working as expected on master.

[abhisheksingh75]

okie...after banging my head for 3hrs...one random solution worked. set "url" to false and "matches" to true. item is getting selected
url: false,
matches: true,
selected: true

[jvliwanag]

To extend @joegilley solution --

Looks like a simple anchor also works:

function AppLink(p: LinkLikeComponentProps): ReactElement {
  return <a {...p} />
}

Then use as:

<AppProvider i18n={enTranslation} linkComponent={AppLink}>

[felipebrahm]

#4375 and some other changes before that have fixed this, so this issue can be closed now. Thanks!

cc @AndrewMusgrave