Selected Cell is misaligned in Gridview (Mac)

SDK Get Help
1

When I move between rows in gridview the selected cell does not line up with the row selected. I am trying to draw the grid in a sprite class using a mixture of what I found in this post and Squidgod's videos.

The corner of a square appears as I navigate up and down between rows.

Gridview issue

my code is as follow:

import "CoreLibs/graphics"
import "CoreLibs/object"
import "CoreLibs/sprites"
import "CoreLibs/timer"
import "CoreLibs/ui"

local pd <const> = playdate
local gfx <const> = pd.graphics

class('MainMenu').extends(gfx.sprite)

function MainMenu:init()
    local backgroundImage = gfx.image.new("Images/Clap-a-long Menu v1.png")
    gfx.sprite.setBackgroundDrawingCallback(function()
        backgroundImage:draw(0, 0)
    end)
    self:setZIndex(-1000)
    self:add()

    -- set size to enable draw
    self:setSize(200, 120)
    -- move to the right spot
    self:moveTo(110, 150)

    -- define the gridview locally and assign to this sprite's table
    local gridview = pd.ui.gridview.new(32, 32)

    gridview:setNumberOfColumns(1)
    gridview:setNumberOfRows(3)
    gridview:setCellPadding(2,2,2,2)
    

    function gridview:drawCell(section, row, column, selected, x, y, width, height)
        if selected then
            --gfx.fillRoundRect(x, y, w, h, radius)
            gfx.fillCircleInRect(x, y, width, height)
           
        else 
            --gfx.drawRoundRect(x, y, w, h, radius)
            gfx.drawCircleInRect(x, y, width, height)
        end
        
        
    end

    self.gridview = gridview
end

function MainMenu:update()
   
    if pd.buttonJustPressed(pd.kButtonUp) then
        self.gridview:selectPreviousRow(true) 
    elseif pd.buttonJustPressed(pd.kButtonDown) then
        self.gridview:selectNextRow(true) 
    end

    self:draw()
    pd.timer.updateTimers()
end

function MainMenu:draw(x,y,w,h)
    -- coordinates are now local to the sprite so we draw from 0, 0
    self.gridview:drawInRect(0, 0, self.width, self.height)
end
2

For anyone that has my problem in the future, how I fixed it is making the sprite the size of the screen, moving it to the middle, and then in the draw function moving it to where I wanted it.

import "CoreLibs/graphics"
import "CoreLibs/object"
import "CoreLibs/sprites"
import "CoreLibs/timer"
import "CoreLibs/ui"

local pd <const> = playdate
local gfx <const> = pd.graphics

class('MainMenu').extends(gfx.sprite)

function MainMenu:init()
    MainMenu.super.init(self)
    local backgroundImage = gfx.image.new("Images/Clap-a-long Menu v1.png")
    gfx.sprite.setBackgroundDrawingCallback(function()
        backgroundImage:draw(0, 0)
    end)
    self:setZIndex(-1000)
    self:add()

    -- set size to enable draw
    self:setSize(400, 240)
    -- move to the right spot
    self:moveTo(200, 120)

    -- define the gridview locally and assign to this sprite's table
    local gridview = pd.ui.gridview.new(32, 32)

    gridview:setNumberOfColumns(1)
    gridview:setNumberOfRows(3)
    gridview:setCellPadding(2,2,2,2)
    

  function gridview:drawCell(section, row, column, selected, x, y, width, height)
        if selected then
            --gfx.fillRoundRect(x, y, w, h, radius)
            gfx.fillCircleInRect(x, y, width, height)
           
        else 
            --gfx.drawRoundRect(x, y, w, h, radius)
            gfx.drawCircleInRect(x, y, width, height)
        end
        
        
    end 

    self.gridview = gridview
end

function MainMenu:update()
   
    if pd.buttonJustPressed(pd.kButtonUp) then
        self.gridview:selectPreviousRow(true) 
    elseif pd.buttonJustPressed(pd.kButtonDown) then
        self.gridview:selectNextRow(true) 
    end
    
    self:draw()
    
end

function MainMenu:draw(x,y,w,h)
    -- coordinates are now local to the sprite so we draw from 0, 0
    self.gridview:drawInRect(10, 100, self.width, self.height)
    
end