Uploaded image for project: 'ERM Platform'
  1. ERM Platform
  2. ERM-1788

Dashboard: Solve focus issues in the widget creation/edit process

    XMLWordPrintable

    Details

    • Template:
    • Sprint:
      ERM Sprint 120, ERM Sprint 121
    • Development Team:
      ERM
    • Release:
      R3 2021

      Description

      When the New widget pane is opened focus should be on the "Widget name" field. (can use Autofocus attribute)

      When the "Add column" button is selected focus should go to the resulting "Column" field. (can use Autofocus attribute)

      When a widget is successfully saved or edit form is cancelled and the dashboard is displayed, focus should be on the action menu button (displays with three dots on it) of the widget which was just created or updated. (have to use a Ref to get focus)

      When navigating away from the dashboard app (unmounting at top level for any reason) then unset focus. 

       Dev task breakdown:

      1)  Set the widgetId on the history object as pointed out in the slack thread.

       2) Within the widget component/widgetHeader component, create a ref and pass it down to the IconButton component via a ref. Make sure you are using this newly added hook for this purpose, passing in both the triggerRef and the ref created for the IconButton to that function.

      Note: If you are creating a ref in the widget component, you would have to tweak the widgetHeader component to accept a forwardRef (https://reactjs.org/docs/forwarding-refs.html) I d suggest, creating a ref in the widgetHeader component for now and passing it down. Once we have this working we can make the tweaks.

      3) Within the widgetHeader component add a useRef hook, that checks if the id of the current widget matches that of the id from the history's state and if so, focus it.

      4) Within the DashboardRoute component, inside the useEffect, return a callback. This should reset the id to null on unmount

      // return () => { history.replace( pathname: history.location.pathname, state: { widgetToFocus: null )}
      

       

        TestRail: Results

          Attachments

            Issue Links

              Activity

                People

                Assignee:
                ostephens Owen Stephens
                Reporter:
                gosguthorpe Gill Osguthorpe
                Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved:

                    TestRail: Runs

                      TestRail: Cases