Summary

If Issue Tracker is accessed from a safari browser (of version < 17) the Issue status filter is broken & hence would not filter the issues by their status, neither sort them by a particular column.

Why is this happening? Inside the callback method of Issue Status Filter's onValueChange, the size property is used to check if there are any Url search params or not. https://github.com/mosh-hamedani/issue-tracker/blob/b27c58029b9e7264b09dc0f43f8b3b015f8f1bee/app/issues/list/IssueStatusFilter.tsx#L28-L29 The problem is that UrlSearchParams.size property is not widely supported on Safari browsers. The size property was only recently supported on Safari version 17 of both iOS & Mac which was released on 26-09-2023, according to MDN. This is also around the time when this course was being recorded.

As per the usage table of browser versions globally by caniuse.com only 16% of users have Safari version 17 & above, rest of the users are using version 16 or below.

In short, there is a lack of browser support for this property on current & older safari browsers, causing potential issues for those who try to access this Issue Tracker on their Safari.

Proposed solution

The proposed solution is to use this code:

        const query = Array.from(params.size).length ? '?' + params.toString() : '';
        router.push('/issues/list' + query);

Or we could just call the toString() method first & only router push if string isn't a falsey value.

And then give a advisory to students on this lecture's description https://members.codewithmosh.com/courses/nextjs-projects-issue-tracker/lectures/49642661 to modify their code if the Issue Status Filter is not working on their browser.

Thank you if you consider this proposal. @mosh-hamedani

mosh-hamedani / issue-tracker

Use `Array.from(params).length` instead of `params.size` in IssueStatusFilter #6

Summary

Proposed solution